webpack 性能优化

如何提升打包速度？

1. 跟上技术的迭代：Yarn、npm、node  版本最好都是最新的、最常用的

2. 尽可能少的模块上使用 loader （比如配置 include、exclude）

3. Plugin 尽可能精简并且可靠 （使用官方的Plugin）

4. resolve 参数合理配置

（1）extensions参数

resolve: {
  extensions: ['js', 'ts', 'vue'],
},

在 webpack.config.js 中 配置 resolve - extensions 参数，在加载文件中，如果没写文件后缀名，先去找以 js 为结尾的文件，入过没有再去找 ts 结尾的文件，有的话就加载，没有再找 vue 结尾的，再没有就是 404 ，所以当我们写vue项目的时候，引入子组件，也可以不写后缀名，仍然不报错

import ModifyInfo from './components/ModifyInfo'
import OrderError from './components/OrderIdError'

这个后缀名要合理配置~不要 .css、.png、.jpg、.jsx 全写上，写太多有性能损耗～

（2）mainFiles参数：

resolve: {
  extensions: ['js', 'ts'],
  mainFiles: ['index']
},

当配置好 mainFiles 参数后：

import OrderError from './components'

引入文件夹，会自动找 components 下的 index.js

 这个也要合理配置，不要配置太多，性能有影响

（3）alias参数

alias: {
   'child': path.join(__dirname, 'src/child/index.js')
}

使用：

import Child from 'child'