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