Vue2项目打包优化(webpack)

2022-03-22T18:00:33.682Z阅读130
12

这个博客系统首次访问加载慢,也不是一天两天了,今天想起来就打算优化一下。几番查找之下,发现问题在于“chunk-vendors.fb88d851.js”文件。只有等这个文件加载完,页面才开始渲染,所以导致页面访问时,白屏二十几秒甚至三十几秒~(简直就是令人崩溃~~~)。

白屏的原因:
VUE等主流的单页面框架都是js渲染html body,所以必须等到vendor.js和app.css加载完成后,完整的界面才会显示。

解决方案:

1、路由懒加载

// import Home from '../views/Home.vue'
// import Index from '../views/index.vue'
// import Link from '../views/link.vue'
// import Message from '../views/message.vue'
// import About from '../views/about_me.vue'

// 通过下方的方式引入组件(异步导入)

const Home = () => import('@/views/Home.vue')
const Index = () => import('@/views/index.vue')
const Link = () => import('@/views/link.vue')
const Message = () => import('@/views/message.vue')
const About = () => import('@/views/about_me.vue')
const ArticleDetail = () => import('@/views/article_detail.vue')
const TimeLine = () => import('@/views/time_line.vue')
const Project = () => import('@/views/project.vue')

2、gzip打包压缩

安装 compression-webpack-plugin:

npm install compression-webpack-plugin --save-dev

3、vue.config.js配置

const CompressionPlugin = require('compression-webpack-plugin') // 引入gzip压缩插件
module.exports = {
  // 没有书写outputDir属性   默认'dist'  对应dev.assetsSubDirectory.
  assetsDir: 'static',
  productionSourceMap: false,
  // productionGzip: true,
  // productionGzipExtensions: ['js', 'css'],
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
  },
  configureWebpack: config => {
    // npm install terser-webpack-plugin -D, 去掉console
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    return {
      plugins: [
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css/,
          threshold: 10240,
          deleteOriginalAssets: false
        })
      ],
      externals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT',
        axios: 'axios',
        'highlight.js': 'hljs',
        'vue-bus': 'VueBus',
        nprogress: 'NProgress'
      }
    }
  }
}

4、index.html引入cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-light.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong>
    </noscript>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  </body>
</html>

5、nginx配置

#开启gzip模式
gzip on;
    
#gizp压缩起点,文件大于1k才进行压缩
gzip_min_length 1k;
    
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 9;
    
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
    
#nginx对于静态文件的处理模块,开启后会寻找以.gz结尾的文件,直接返回,不会占用cpu进行压缩,如果找不到则不进行压缩
gzip_static on;
    
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 2 4k;
*邮箱为选填, 若输入邮箱,您留言的回复,将在第一时间以邮件的形式通知您。
总共2条留言
  • 原来如此
    • 回复
  • 点击标题才有链接响应,点击下面的文本没有。一般是点击文本也有的,可以参考下
    • 回复