运管 - webpack 优化配置

optimization.splitChunks

const optimization = {
  splitChunks: {
    chunks: 'initial'
  },
  // minimize: false
}

https://webpack.docschina.org/plugins/split-chunks-plugin/

splitChunks 就是 webpack 中一个提取或分离代码的插件

主要作用是提取公共代码，防止代码被重复打包

拆分过大的 js 文件，合并零散的 js 文件

externals

const externals = {
  'react': 'window.React',
  'react-dom': 'window.ReactDOM',
  'react-route': 'window.ReactRouterDOM',
  'react-route-dom': 'window.ReactRouterDOM',
}

https://webpack.docschina.org/configuration/externals#root

external 的作用是，从打包的 bundle 文件中排除依赖

就是让在项目中通过 import 引入的依赖在打包的时候不会打包到 bundle 中去，而是通过 script 的方式去访问这些依赖

resolve.extensions

resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
},

https://webpack.docschina.org/migrate/3/#resolveextensions

在导入语句没有带文件后缀时， webpack 会自动带上后缀去询问文件是否存在，如果这个列表越长，或者正确的后缀越往后，就会造成尝试的次数越多

所以在配置 resolve.extensions 时需要遵守一下几点：

• 会追尝试列表要尽可能的小，不要将项目中不可能存在的情况写到后缀尝试列表中

• 频率出现最高的文件后缀要优先放在最前面，以做到尽快退出寻找过程

• 在源码中写导入时，要尽可能带上后缀，从而可以避免寻找过程。例如在确定的情况下将
  require('./data') 写成 require('./data/json')

resolve.alias

resolve: {
    alias: {
      utils: path.resolve(__dirname, 'client/utils/'),
      common: path.resolve(__dirname, 'client/common/'),
      modules: path.resolve(__dirname, 'client/modules/'),
      components: path.resolve(__dirname, 'client/components/'),
    },
  },

https://webpack.docschina.org/configuration/resolve#resolvealias

resolve.alias 配置项通过别名来将原来导入路径映射成一个新的导入路径

在实战项目中经常会依赖一些庞大的第三方模块，以 React 库为例，发布出去的 React 库中包含两套代码

一套是采用 CommonJS 规范的模块化代码，这些文件都放在 lib 录下，以 package.json 中指定的入口文件 react.js 为模块的入口

一套是将 React 的所有相关代码打包好的完整代码放到一个单独的文件中， 这些代码没有采用模块化，可以直接执行。其中 dist/react.js 用于开发环境，里面包含检查和警告的代码。dist/react.min.js 用于线上环境，被最小化了。

在默认情况下， Webpack 会从入口文件 ./node_modules/react/react.js 开始递归解析和处理依赖的几十个文件，这会是一个很耗时的操作 通过配置 resolve.alias, 可以让 Webpack 在处理 React 库时，直接使用单独、完整的 react.min.js 文件,从而跳过耗时的递归解析操作