webpack打包优化

  • 优化配置

    • 优化:尽量减少搜索的范围
      • 当你引入一个模块的时候需要去解析,配置解析路径
        resolve: {
        modules: ['node_modules', './lib']
        },
      • 配置别名查找 alias
      • 配置扩展名 extensions
      • 配置mainFields + noParser 可以直接指定地址查找,并且不递归打包找到的已经打包好的文件
      • happypack多进程打包
      • ParallelUglifyPlugin 并行压缩
      • 配置loader的解析include + excludes 指定解析的目录
      • 配置dll:动态链接库,需要单独配置, 需要两个插件dllPlugin和refrense。。
    • tree-shaking(webpack4 production模式已经支持)
      • 依靠es6的mobule模块解析,如果不是es6就不能实现
  • 提取公共代码

    optimization: {
    splitChunks: {
    }
    }

  • scope hoistring: 作用域提升(webpack4 production模式已经支持)

    • scope hositing,减少函数声明,把函数合并
    • new webpack.optimize.ModuleConcatenationPlugin();
    • 体积更小
  • 代码分离,模块懒加载

    • import().then() // es7 的语法,它在webpack里是天然的分割点
    • 原理:jsonp回调
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容