Webpack

[py-tofee]

plugins 插件

webpack-dev-middleware

wepack-hot-middleware

[py-tofee]

webpack 运行原理

1. webpack函数在运行时，读取webpac.config.js配置文件，生成compiler实例，遍历plugin数组，把compiler实例注入到plugin的apply方法中（每个plugin必须要实现一个apply方法）；这样，在apply方法中，就可以监听compiler的钩子函数，在特定的时候执行相关操作，优化输出的打包代码；
2. 读取配置的entries，递归遍历所有入口文件;
3. 对入口文件进行编译，开始compilation过程，使用loader对文件内容进行编译，再将编译好的文件内容解析成AST静态语法树；
4. 递归依赖的模块，重复第3步，生成AST语法树，在语法树中可以分析到模块之间的依赖关系，对应做出优化（tree shaking）；
5. 将所有模块中的require（babel-loader将ES6的import转换成commonJS的require）语法替换成__webpack_require__（一个函数，传入模块名称，返回模块的引用）来模拟操作；
6. 最后把所有的模块打包进一个自执行函数（IIFE）中。

[py-tofee]

webpack优化策略

性能优化篇---Webpack构建速度优化

1. 构建速度优化
   • 可视化查看webpack构建分析，webpack-bundle-analyzer插件

     // 判断生产环境
     if (process.env.NODE_ENV === 'production') {  // npm run build 时
     if (process.env.npm_config_report) {
     config
     .plugin('webpack-bundle-analyzer')
     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
     .end()
     }
     }

     在vue中，执行 npm run build --report时，在全局process.env中新增了一个属性 npm_config_report 为 true，所以会调用BundleAnalyzerPlugin；

• 优化loader配置 loader处理文件比较耗时，所以要让尽可能少的文件被loader处理

  {
  test: /\.js$/,
  use: [
      'babel-loader?cacheDirectory' ,// 开启转换结果缓存
  ],
  include: path.resolve(__dirname, 'src'), // 只对src目录中文件采用babel-loader
  exclude: path.resolve(__dirname,' ./node_modules'), // 排除node_modules目录下的文件
  }

  babel-loader支持cacheDirectory选项，默认为false；如果设置为true，那么转换的结果将会被缓存起来；当webpack再次编译时，会先尝试从缓存中读取转换结果，以避免资源浪费；

• 优化resolve.extensions配置 在导入没有文件后缀的路径时，webpack会自动带上后缀去尝试 询问 文件是否存在，而resolve.extensions用于配置尝试后缀列表；为了减少尝试次数和匹配时间，频率出现高的文件后缀应放在最前面，优先匹配；

• 配置resolve.alias别名，缩短webpack查找路径；webpack查询模块时，直接根据别名对应的目录去查找模块，减少了webpack自己去按目录查询模块的时间

  resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
  '@': './src'
  }
  }

[py-tofee]

使用DllPlugin优化

在webpack进行打包时，对于某些依赖的第三方库，如'vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'lodash'等，不会修改和升级的库，可以让它和业务代码分开打包；

实现目标

• 将不会修改和升级的第三方库抽离，分开打包到一个个单独的动态链接库中；
• 打包业务代码时，当需要导入的库存在于动态链接库中，就直接从动态链接库中拉取；
• 项目依赖的所有动态链接库都需要被加载

  接入工具（webpack已内置）

• DllPlugin插件：用于打包出一个个单独的动态链接库文件
• DllReferencePlugin: 用于在主要的配置文件中引入 DllPlugin 插件打包好的动态链接库文件；

  配置webpack.dll.config.js文件，用于构建动态链接库

  {
  entry: {
  // 需要提取的库文件
  vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'lodash']
  },
  output: {
  path: resolve(dllPath),
  filename: '[name].dll.[hash:8].js',
  // vendor.dll.js中暴露出的全局变量名
  // 保持与 webpack.DllPlugin 中名称一致
  library: '[name]_[hash]'
  },
  plugins: [
  // manifest.json 描述动态链接库包含了哪些内容
  new webpack.DllPlugin({
    path: resolve(dllPath, '[name]-manifest.json'),
    // 保持与 output.library 中名称一致
    name: '[name]_[hash]',
    context: process.cwd()
  })
  ]
  }

  注意：DllPlugin和output.library中的name必须保持一致，因为DllPlugin的name参数影响 manifest.json中的name，而 webpack.pro.config.js 中的 DllReferencePlugin 会读取manifest..json中的name，并将这个name作为从全局变量中获取动态链接库内容的变量名；

[py-tofee]

压缩js文件

• ParallelUglifyPlugin，可以多个子进程并行执行
• UglifyJsPlugin（webpack内置的），单线程执行

[py-tofee]

模块拆分

splitChunks:

• async表示只从异步加载得模块（动态加载import()）里面进行拆分，默认值
• initial表示只从入口模块进行拆分
• all表示以上两者都包括
• minChunks：

  splitChunks: {
  cacheGroups: {
  commons: {
    name: 'commons',
    chunks: 'initial',
    // minChunks表示，如果一个模块的共享次数（重复加载次数）大于等于2，那么这个模块将被拆分成一个单独的bundle，避免重复打包
    minChunks: 2 // minChunks的值必须大于等于1
  }
  }
  }

[py-tofee]

webpack HMR 热更新原理

参考链接 HMR：Hot Module Replacement 优点：不刷新浏览器的前提下，更新页面，保存页面的状态，提升开发效率； 启动："start": "webpack-dev-server --hot --open" sockjs：webpack-dev-server中的一个依赖库

1. 通过npm start启动devServer服务，--hot配置告诉webpack自动引入HotModuleReplacementPlugin插件，而不需要手动引入；
2. webpack-dev-middleware插件监听文件的变化，通知webpack重新执行编译打包；并将打包后的文件保存在内存中，而不是output.path目录下，原因：访问内存中的文件比访问文件系统中的文件更快，且减少了代码写入文件的开销；
3. 在devServer启动的时候，通过sockjs在devServer和浏览器端建立一个webSocket长链接，webpack-dev-server监听compile是否完成，当compile完成后，通过这个webSocket长链接 将编译打包后的新模块的hash值告知浏览器端；
4. 启动时，webpack-dev-server修改entry 入口文件，在里面加入了webpack-dev-client相关代码，用于接收webSocket消息；
5. 浏览器接收到最新的hash值，通过jsonp向devServer请求最新的模块代码，并将新的模块代码返回给HMR runtime；
6. HMR runtime 对新的模块代码做进一步处理，决定是直接刷新浏览器页面，还是进行后面的热更新操作；
7. 如果需要执行热更新，HMR会对新旧模块代码进行对比，更新模块的同时，也更新模块之间的依赖关系，实现不刷新浏览器的前提下，更新页面；
8. 如果热更新失败，那么将直接刷新浏览器，实现代码更新；

[py-tofee]

开发中的一些配置

require-context

• webpack的require.context API可以用于动态引入某个目录下的所有文件
• 语法

  require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
  );

• 在vue前端项目中，可以在公共组件，公共配置（码本数据），vuex 模块等需要全量导入目录中所有文件的场景中，可以使用require.context

style-resources-loader

style-resources-loader 可以自动导入less等预处理器的公共样式变量，避免在每个样式文件中手动@import导入

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [
      resolve('src/assets/variables.less'),
      resolve('src/assets/function.less')
    ]
  }
}

svg-sprite-loader

svg-sprite-loader可以将常用的多个svg图标，拼接成 雪碧图，当夜页面中使用svg-icon时，就不需要通过svg的URL导入了

src/icons目录下有多个svg图片
a.svg: <svg>{{省略的icon path}}</svg>
b.svg: <svg>{{省略的icon path}}</svg>
...
使用svg-sprite-loader之后，变成一个svg图片
<svg>
    <symbol class="icon" viewBox="0 0 1024 1024" id="a-icon">{{省略的icon path}}</symbol>
    <symbol class="icon" viewBox="0 0 1024 1024" id="b-icon">{{省略的icon path}}</symbol>
</svg>
定义一个全局vue组件<SvgIcon>，iconName指向symbolId，就可以复用对应symbol的图片啦
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

在src/icons目录下，新建一个index.js文件，使用require.context动态引入所有svg图片，

try {
  const req = require.context('./svg', false, /\.svg$/)
  const requireAll = requireContext => requireContext.keys().map(requireContext)
  requireAll(req)
} catch (e) {
  // ignore
  console.warn('load svg icons error.')
}

配置全局可用的常量和指向公共模块的变量

plugins: [
  new webpack.BannerPlugin(`bulid time: ${moment().format('YYYY-MM-DD HH:mm:ss')}`),
  // 配置全局常量，可以在代码中使用
  new webpack.DefinePlugin({
    'process.env.CFG': JSON.stringify(process.env.CFG),
    'modeFlag': JSON.stringify(process.env.modeFlag)
  }),
  // 自动加载配置的模块，在使用时不需要再导入
  new webpack.ProvidePlugin({
    _: 'lodash'
  })
]