## 前言 本文主要是摘录有效的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) -