深入理解基于vue-cli的webpack打包优化实践及探索

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const smp = new SpeedMeasurePlugin({
 outputFormat:"human",
});
module.exports = {
configureWebpack: smp.wrap({
  plugins: [
   new webpack.ProvidePlugin({
    $: "zepto",
    Zepto: "zepto",
   }),
   new BundleAnalyzerPlugin(),
  ],
  optimization: {
   splitChunks: {
    cacheGroups: {
     echarts: {
      name: "chunk-echarts",
      test: /[\\/]node_modules[\\/]echarts[\\/]/,
      chunks: "all",
      priority: 10,
      reuseExistingChunk: true,
      enforce: true,
     },
     demo: {
      name: "chunk-demo",
      test: /[\\/]src[\\/]views[\\/]demo[\\/]/,
      chunks: "all",
      priority: 20,
      reuseExistingChunk: true,
      enforce: true,
     },
     page: {
      name: "chunk-page",
      test: /[\\/]src[\\/]/,
      chunks: "all",
      priority: 10,
      reuseExistingChunk: true,
      enforce: true,
     },
     vendors: {
      name: "chunk-vendors",
      test: /[\\/]node_modules[\\/]/,
      chunks: "all",
      priority: 5,
      reuseExistingChunk: true,
      enforce: true,
     },
    },
   },
  },
 })
}

npx vue-cli-service inspect > output.js

resolve:{
 modules: [path.resolve(__dirname, 'node_modules')],
 alias:{
  'three':path.resolve(__dirname, './node_modules/three/build/three.min.js'),
  'zepto$':path.resolve(__dirname, './node_modules/zepto/dist/zepto.min.js'),
  'swiper$':path.resolve(__dirname, './node_modules/swiper/dist/js/swiper.min.js'),
  'lottie-web$':path.resolve(__dirname, './node_modules/lottie-web/build/player/lottie.min.js'),
  'lodash$':path.resolve(__dirname, './node_modules/lodash/lodash.min.js'),
 }
},
module:{
 noParse:/^(vue|vue-router|vuex|vuex-router-sync|three|zepto|swiper|lottie-web|lodash)$/
},

node --inspect-brk=9229 app.js

node --inspect-brk=9229 node_modules/@vue/cli-service/bin/vue-cli-service.js build

 configureWebpack:(config)=>{
  console.log("webpack config start");
  let originCssRuleLoader = config.module.rules[6].oneOf[0].use;
  let newCssRuleLoader = 'happypack/loader"htmlcode">

plugins: [
  new HappyPack({
   id: 'css',
   threads: 4,
   loaders: originCssRuleLoader
  }),
 ],


本以为这样就OK了，但是很遗憾的告诉大家，报错了...





可以看到报错的内容，是在处理vue文件的时候，出了错误。


如何解决


笔者百度了，也谷歌了，大抵是说happypack不支持vue-loader，同时，根据报错也查了一下处理的方案，通过设置parallel参数，也还是无效。


笔者甚至怀疑是自己的happypack配置不对，于是我把配置原样移植配置到另一个非vue项目中，一切运行正常。

答案：此题无解~


原因分析：


由于vue文件中会含有CSS，所以vue-loader会提取出其中的css，交给其他loader处理，vue-loader-plugin会通过在vue文件后面加上查询字符串来告诉其他loader，针对这个文件要做处理。意味着什么呢？我们的vue-loader在处理文件的时候，通知其他loader处理，但是此时的loader配置已经被我们改写成了happypack，而vue又与happypack不兼容，最终导致了报错。很遗憾的告诉大家，vue-cli接入happypack--失败。


（注：这一部分主要是笔者在webpack优化过程中的探索，虽然最终不能让自己的webpack打包很好的优化，但是在这个探索的过程中，我们也可以学到很多~包括 vue-cli对配置对象的处理？如何调试普通文件nodejs代码？vue-loader中对vue文件的处理流程？vue-loader-plugin帮我们做了什么事？而这些都是要自己慢慢翻阅，慢慢踩坑去了解的~）
2.3使用dllplugin
和大多数的webpack优化教程一样，笔者也尝试了利用dllplugin进行优化，该插件的本质，是提取出我们常用的第三方模块，单独打成一个文件包，之后插入到我们的html页面中，这样我们以后每次打包，都不需要针对第三方模块进行处理，毕竟第三方模块动辄成千上万行。


流程介绍：
1、配置webpack.dll.js针对第三方库打包
2、vue.config.js中配置plugin
3、html中引入dll打包出来的js文件。（一般采用部署CDN的方式）
由于项目中有很多大型的第三方库，类似three、echart等，所以笔者进行了以下配置：（webpack.dll.js）


const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    vuebundle: [
      'vue',
      'vue-router',
      'vuex',
    ],
    utils:[
      'lodash',
      'swiper',
      'lottie-web',
      'three',
    ],
    echarts:[
      'echarts/lib/echarts',
      "echarts/lib/chart/bar",
      "echarts/lib/chart/line",
      "echarts/lib/component/tooltip",
      "echarts/lib/component/title",
      "echarts/lib/component/legend",
    ]

  },
  output: {
    path: path.resolve(__dirname, './static/'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'build', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
}


针对不同的库的大小进行划分，打了三个包，为啥不打成一个包？一个包那就太大了，你并不希望你的用户加载一个大型JS文件包而阻塞，影响页面性能。


接下里是vue.config.js的配置：


plugins: [
   new webpack.ProvidePlugin({
    $: "zepto",
    Zepto: "zepto",
   }),
   new DllReferencePlugin({
    manifest: require('./build/echarts-manifest.json'),
   }),
   new DllReferencePlugin({
    manifest: require('./build/utils-manifest.json'),
   }),
   new DllReferencePlugin({
    manifest: require('./build/vuebundle-manifest.json'),
   }),
   new BundleAnalyzerPlugin(),
  ]


引入了DllPlugin。接下来配置HTML：


（由于笔者没将DLL打包出来的js文件上传到CDN，所以只能本地自己起个node服务器返回静态资源了）


 <body>
   <div id="app"></div>
  <!-- built files will be auto injected -->
  <script type="text/javascript" src="/UploadFiles/2021-04-02/echarts.dll.js">

然后npm run serve，开始页面调试和开发~


舒服~


优化结果：





由于少了大型第三方库，所以时间控制在了20s左右了。优化相对比较明显~
3、优化与探索总结
优化到这，基本就结束了。


webpack常见的优化方式，优化路径查找、设置缓存、happypack以及dllplugin，前两项vue-cli已经帮我们做了一些，而happypack由于不和vue兼容，导致无法接入，dllplugin通过单独提取第三方库，取得了明显优化。

当然，笔者也尝试剔除了一些项目中无用的代码，不过也是不痛不痒。


webpack优化方式总结：
1、优化模块查找路径
2、剔除不必要的无用的模块
3、设置缓存：缓存loader的执行结果(cacheDirectory/cache-loader)
4、设置多线程：HappyPack/thread-loader
5、dllplugin提取第三方库
当然，这是针对开发的优化，如果是针对部署上的优化呢？我们可以设置splitchunk、按需加载、部署CDN等，这里就不展开了。
最后
希望这篇文章能够大家有所收获~ webpack已经是前端仔必备技能了~有空大家钻研一下webpack的配置和原理，也是会有所收获的！谢谢观看~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。