vuecli webpack配置优化首页加载速度

首先安装 webpack-bundle-analyzer
npm install webpack-bundle-analyzer -save-dev
然后在vue.config.js中添加如下配置

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
}

这时候再打包，就会自动运行并打开一个分析页面，

image.png

此时我们就可以根据分析图来找到打包体积过大的罪魁祸首。

首先来个最简单粗暴的方式，就是在默认配置下

1.过滤 momentjs :

时间处理函数，附带了一些语言包，过滤后直接少了200k

2.禁用 Preload和Prefetch：

Preload默认开启，会在默认加载完毕再一起显示，自然会很慢，一旦禁用就会跟Html文档一样从上到下按顺序加载，很快出现页面内容

3.gzip压缩

需要服务器也开启gzip压缩，可以大大减小包的体积，需要安装 compression-webpack-plugin

nmp i compression-webpack-plugin -D

配置如下

const webpack = require('webpack')

module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
     return {
       externals: externals,
       plugins: [
        //过滤moment.js
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        //gzip压缩
        new CompressionPlugin({
          test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名
          threshold: 10240, //对超过10k的数据压缩
          deleteOriginalAssets: false //不删除源文件
        })
       ],
       performance: {
          hints: false
       }
     };
    }
  },
  chainWebpack: config => {
    // 禁用preload prefetch
    config.plugins.delete('preload')  
    config.plugins.delete('prefetch')
    config
    .plugin('webpack-bundle-analyzer')
    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}

OK，如果还想继续优化，就可以考虑CDN，组件按需加载等等，
请参考以下资料

参考资料1 https://www.jianshu.com/p/e0d00c81e412
参考资料2 https://ld246.com/article/1584265563174
参考资料3 https://www.jianshu.com/p/476387c7fea3
参考资料4 https://juejin.cn/post/6844904163327868941