webpack性能优化

参考：https://www.jianshu.com/p/809958a504b8

一、减少webpack打包后的文件体积

1.  按需加载【这个不是减少打包后的体积，而是运行时加载文件的体积减少了】

   如：将每个路由页面单独打包为一个文件

   component: () =>
       import(/* webpackChunkName: "home" */ '../pages/home/Home'),

   webpack按需加载原理：https://juejin.cn/post/6850418111599165448

   js的懒加载，最后的实现都是要通过script标签实现的。webpack的懒加载也是一样

2.  压缩js、html、css文件
   
   

3. 对图片就像压缩和优化【合并】
   
   

4. Scope Hoisting：Scope Hoisting会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。
   
   
5. Tree Shaking

 

二、构建速度优化【减少webpackd打包时间】

1.  优化 loader 的文件搜索范围【babel-loader构建时间过长，限定加载器作用范围】
   
   
2. 缓存加载器执行结果
   正因为babel-loader在解析转换上耗时太长，所以我们希望能缓存每次执行的结果。webpack的loader中刚好有 cacheDirectory 的选项，默认为false。 开启后将使用缓存的执行结果，打包速度明显提升。下次只需要编译更改过的代码文件即可
   
   
3. resolve 解析优化
   

   resolve 是依赖解析，依赖体现的就是文件路径的引用。即 文件路径解析。

   • 当项目中出现 import ‘react’ 既不是绝对路径也不是相对路径时，指定好搜索的路径，可以不用过多的查询

   • 尽可能少的使用 resolve.alias 来设置路径别名，因为会影响到tree shaking 的优化

   • 后缀自动补全尽可能的少。减少路径查询的工作

   • 当使用的第三方库过大，并且不包含import require define 的调用。可以使用noParse让库不被loaders 解析
     
     

4. 使用多线程处理打包：
   HappyPack插件：能够让Webpack把打包任务分解给多个子线程去并发的执行，子线程处理完后再把结果发送给主线程。
   

三、分包【即提取公共代码】

 

注意：

•  webpack是支持动态导入文件的。如
  

  import(`./locale/${language}.json`)

  因为无法确定具体哪个文件，webpack会把 locale 目录中的每个 .json 文件打包到新的 chunk 中。在运行时，计算完变量 language 后，就可以正确加载对应的文件。
  如果locale目录下不是所有的json文件都要打包，webpack也提供了配置，可以减少不必要的文件打包进去。

  提示
  使用 webpackInclude and webpackExclude 选项可让你添加正则表达式模式，以减少 webpack 打包导入的文件数量。

• webpack动态导入文件，打包后的文件名，可以使用占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。定义打包后名称。
  

  import(/* webpackChunkName: "[request]" */ `../views/dongtai/${this.routerText}.vue`)