深入浅出Webpack - 4 - webpack优化

webpack优化

找出问题

• Webpack Analyse可视化分析工具
  • 首先，项目执行 webpack--profile--json > stats.json ，将 webpack--profile--json 输出的内容通过管道输出到stats.json文件中。
  • 打开Webpack Analyse链接的网页后，上传stats.jsonJ文件进行性能分析
• webpack-bundle-analyzer可视化分析工具
  • npm i-g webpack-bundle-analyzer,安装 webpack-bundle-analyzer到全局
  • “在项目根目录中执行 webpack-bundle-analyzer 后，浏览器会打开对应的网页并展现性能分析结果

webpack优化

• 1.优化开发体验（⽬的：提升开发效率）
• 2.优化输出质量（⽬的：为⽤户呈现体验更好的⽹⻚，如减少⾸屏加载时间、提升性能流畅度）

• 优化开发体验（⽬的：提升开发效率）

  • (1)优化构建速度
    • 缩小文件的搜索范围
      • 通过test、include、exclude三个配置项来命中 Loader 要应用规则的文件，缩小文件命中的范围。
      • resolve.modules，指定去哪些目录下寻找第三方模块，减少默认一层层查找的时间。
      • resolve.mainFields，配置第三方模块使用哪个入口文件，减少搜索步骤。
      • resolve.alias，通过别名来将原导入路径映射成一个新的导入路径。通过别名设置，指定要处理的文件，跳过耗时的递归解析操作。
      • resolve.extensions，配置在尝试过程中用到的后缀列表，减少尝试的可能，在源码中写导入语句时，要尽可能带上后缀，从而可以避免寻找过程。
      • module.noParse配置项可以让Webpack忽略对部分没采用模块化的文件的递归解析处理，提高构建性能。
    • 使用DllPlugin
      • 大量复用模块的动态链接库只需被编译一次，在之后的构建过程中被动态链接库包含的模块将不会重新编译，而是直接使用动态链接库中的代码。
      • DllPlugin插件，用于打包出一个个单独的动态链接库文件。
      • DllReferencePlugin插件，用于在主要的配置文件中引入DllPlugin插件打包好的动态链接库文件。
    • 使用HappyPack，将任务分解到多个进程中去并行处理，从而减少总的构建时间。
    • 使用ParallelUglifyPlugin，开启多个子进程，对多个文件的压缩工作分配给多个子进程去完成，每个子进程通过UglifyJS压缩代码，并行执行。
  • （2）优化使⽤体验
    • 使用自动刷新
      • webpack模块负责监听文件（忽略node_modules），webpack-dev-server模块则负责刷新浏览器（关闭inline模式，只注入一个代理客户端）。
      • 文件监听是在发现源码文件发生变化时，自动重新构建出新的输出文件
      • 监听多个文件：Webpack会从配置的Entry文件出发，递归解析出Entry文件所依赖的文件，将这些依赖的文件都加入监听列表中，对列表中的每个文件都定时执行检查。
    • 开启热模块替换

• 2.优化输出质量（⽬的：为⽤户呈现体验更好的⽹⻚，如减少⾸屏加载时间、提升性能流畅度）

  • （1）减少⽤户能感知到的加载时间，即⾸屏加载时间

    • 区分开发环境、生产环境，process.env.NODE_ENV！=='production'

    • 压缩代码

      • 通过GZIP算法对文件进行压缩，还可以对文本本身进行压缩,提升网页加载速度、混淆源码。
      • UglifyJsPlugin：通过封装UglifyJS实现压缩。
      • ParallelUglifyPlugin：多进程并行处理压缩。
      • UglifyESPlugin，ES6压缩，warnings，drop_console，collapse_vars，reduce_vars，comments，beautify。
      • 开启cssnano去压缩CSS代码，开启css-loader的minimize选项

    • CDN加速

      • 在output.publicPath中设置JavaScript的地址。
      • 在css-loader.publicPath中设置被CSS导入的资源的地址。
      • 在WebPlugin.stylePublicPath中设置CSS文件的地址。

    • Tree Shaking，配置Babel以让其保留ES6模块化语句。修改.babelrc

    • 提取公共代码，提取多个Chunk中的公共部分的插件CommonsChunkPlugin

    • 分割代码，按需加载，import(/* webpackChunkName: 'show' */ './show' )

  • （2）提升流畅度，即提升代码性能

    • 使用Prepack,通过在编译阶段预先执行源码来得到执行结果，再直接将运行结果输出以提升性能。
    • 开启Scope Hoisting,让Webpack打包出来的代码文件更小、运行更快

---

---

---

参考&感谢各路大神

• [深入浅出Webpack-吴浩麟]