Vue项目打包优化

最近做完了一个项目，但是打包之后发现太大了，记录一下优化方案

• Element、Vant 等组件库按需加载
• 静态资源使用cdn进行引入
• 开启gzip压缩
• 路由懒加载

#首先看看啥也没做时打包的大小

可以使用 webpack-bundle-analyzer 插件在打包时进行分析

 

可以看到有2.5M的大小，下面就进行优化

Element、Vant 等组件库按需加载

可以看到，在打包的文件中，占据最大比例的是这两个组件库,我们可以使用按需加载来减小 按需加载按照官方文档来就行,需要注意配置bebel.config.js

  // 在bebel.config.js的plugins选项中配置    
    ["component",      {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ],
     ["import", {      "libraryName": "vant",      "libraryDirectory": "es",      "style": true    }, 'vant']

配置后的大小,可以明显的看到有减小

静态资源使用cdn进行引入

接下来占比最大的就是一些可以通过cdn进行引入的静态资源了

设置例外

vue.config.js文件中进行设置例外，不进行打包

设置例外的时候 key:value 中key的值为你引入的库的名字，value值为这个库引入的时候挂在window上的属性

    config.externals({
      "vue":'Vue',
      "vue-wordcloud":'WordCloud',
      "@wangeditor/editor-for-vue":"WangEditorForVue",
    })

然后在项目的 public/index.html 文件中进行cdn引入

cdn的话有挺多种的,比如bootcdn、jsdelivr等，推荐使用jsdelivr，npm官方就是使用的这个

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.runtime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-wordcloud@1.1.1/dist/word-cloud.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor-for-vue@1/dist/index.js"></script>

完成后

gzip压缩

开启gzip压缩需要使用插件，可以用compression-webpack-plugin

在vue.config.js文件中进行配置

chainWebpack: config => {
    config.optimization.minimize(true)
},
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        return {
        plugins: [
            new CompressionPlugin({
            test: /\.js$|\.css$|\.html$/,
            algorithm: 'gzip',
            threshold: 10240,
            deleteOriginalAssets: false,
            })
        ]
        }
    }
}

完成后

在配置完成后，在本地并不能开启使用，需要配置Nginx进行支持才行

路由懒加载

路由懒加载的基础是webpack的Magic Comments 官方文档

    // 在路由配置中，通过下面这种方式导入对应组件
    component: () => import(/* webpackChunkName: "mColumn" */ '../mviews/ColumnView.vue')

完成后

路由懒加载并不会减小文件打包后的大小，但是可以让文件分为不同的模块，当路由跳转时，才加载当前路由对应的组件

这样就可以大大减少首屏白屏的时间，不用在第一次进入的时候就加载全部的文件

如图，当第一次进入的时候只会加载到home.xx.js，当进入另一个路由的时候就会去加载对应组件，如图中的socket.xx.js