webpack优化

• 1: webpack output 中建议使用contenthash而非chunkhash
  contenthash是基于文件内容计算出来,如果文件改动生成新的hash,反则保持原hash,便于浏览器long term caching;
  chunkhash是每npm build的时候都会生成一个新的hash;

• 2: 代码分离
  常用的代码分离方法有三种
  (1) 入口起点：使用 entry 配置手动地分离代码。这种方式可能会有隐患:

  1):  不同入口都使用了相同的_loadsh包,打包之后会将这个包分别打包到不同的bundle
  2):这种方式不够灵活,不能动态地将核心应用程序逻辑中的代码拆分
  可以配合SplitChunksPlugin去重和分离 chunk

  (2) 防止重复：使用 SplitChunksPlugin 去重和分离 chunk。

   optimization: {
     splitChunks: {
     chunks: 'all'
     }
   }

  (3) 动态导入：通过模块中的内联函数调用来分离代码。

  import(/*webpackChunkName:loadsh*/,'loadsh').then(res=>{}).catch()

  这里我们需要使用 default 的原因是，从 webpack v4 开始，在 import CommonJS 模块时，不会再将导入模块解析为 module.exports 的值，而是为 CommonJS 模块创建一个 artificial namespace object(人工命名空间对象)，关于其背后原因的更多信息，请阅读 webpack 4: import() 和 CommonJs

本文由 ws 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Dec 10, 2019 at 12:47 pm