webpack性能优化

webpack打包优化

1. Tree-shaking

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的静态结构特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

sideEffects副作用

presets

在babel.config.js中，presets可能会把ES6模块转换

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    {
        modules: false // 不需要转换ES6
    }
  ]
}

2. 作用域提升

可以减少代码体积，把一些函数进行合并
执行效率提高

3. 结合Babel优化配置

在需要的地方引入polyfill兼容

useBuiltIns: 'usage'配置

@babel/plugin-transform-runtime

4. webpack打包速度优化

noParse

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中 不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。

提高构建速度
直接通知webpack忽略较大的库
被忽略的库不能有import、require、define的引入方式，比如lodash

DllPlugin

DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles，同时还大幅度提升了构建的速度。"DLL" 一词代表微软最初引入的动态链接库。

避免打包时对不变的库重复构建（比如vue源码）
提高构建速度（开发时）

基于webpack的代码拆分（code splitting）

缩短首屏加载

手工定义多个入口
splitChunks提取公有代码，拆分业务代码与第三方库
动态加载

基于webpack的资源压缩（minification）

Minification的相关插件（市面上比较公认的）

Terser 压缩JS
mini-css-extract-plugin 压缩CSS
HtmlWebpackPlugin-minify 压缩HTML

基于webpack的资源持久化缓存

每个打包的资源文件有唯一的hash值
修改后只有受影响的文件hash变化
充分利用浏览器缓存，平稳的更新过渡

基于webpack的应用大小监测与分析

webpack chart（在线的）
source-map-explorer
speed-measure-webpack-plugin

性能优化（5）——webpack优化