参考列表
最后更新于：2022-04-02 05:33:20
## 前言
本文主要是摘录有效的webpack主题的优化文章，吸收并实践其有用的部分，进行总结到个人项目实践中。
## 优化操作指南
备注：webpack版本：2.7.0
### 公共第三方包资源抽离
比如ui框架，工具库等作为单独的资源进行打包抽离，具体优点：
1 不打包到主文件中，减小主体包大小
2 不进行压缩等控制，节省时间
在webpack3.x的版本里，你可以通过设置单独的入口文件，然后分别打包、长缓存来实现，比如：
~~~
module.exports = {
entry: {
index: './src0/index.js',
vendor: ['react', 'react-dom', 'react-router-dom', 'immutable']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash:4].js',
chunkFilename: '[name].[chunkhash:4].child.js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
]
~~~
当然，你也可以通过设置别名来实现，这样就不会加载打包，直接使用对应的文件即可。依赖的文件可以使用npm包，可以使用cdn地址，也可以使用本地目录。
- [简书：如何处理第三方依赖文件](https://www.jianshu.com/p/6ffb33dff0cb?utm_source=oschina-app)
### 公共资源的抽离
将项目中公共的资源，包括工具文件，图片资源等进行公共封装 。
### treeShaking
主要作用是移除无用代码，但是目前项目中的库更多的还是引入全部代码，进行相关的配置，让其体积更小。
### 代码分割
#### 路由分割
代码分割，由于前端的路由主要是前端控制，那么目前是每个路由都单独拆分了文件，具体的配置是在router中动态import实现的。
关于这一点，也可以分析下是否可以根据具体业务，每个业务中的部分进行拆分，而不是每个路由都拆分，这样可能会导致粒度过高。
#### 文件分割
具体业务中引入的大文件进行分割，主要是让主体文件更小，并且让其实现动态加载。
### 组件异步加载
当前展现不需要的组件是如何异步加载，如何按需加载，具体的配置是什么
### 加速打包的方式
### 根据目标浏览器减小包体积
## 参考文章列表
- [https://u3xyz.com/detail/31](https://u3xyz.com/detail/31)
- [优化体积](https://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/)
- [优化打包速度](https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/)
- [webpack解决打包过大的问题](https://www.jianshu.com/p/a64735eb0e2b)
- [提高开发效率攻略](https://segmentfault.com/a/1190000005770042)
-
';