webpack 代碼優化壓縮方法
阿新 • • 發佈:2018-05-25
入口 segment 時間 rod 優化 應該 end ini classname
在配置基於webpack的react單頁面腳手架時,公共依賴庫代碼打包至vender.js中,頁面邏輯代碼打包至app.js中,使用webpack-bundle-analyzer分析發現,兩個js中包含重復代碼。優化方法如下:
webpack.config.js 修改
(1)修改入口文件的順序,vender.js作為依賴文件應該最先引用
webpackConfig.entry = { vender: [ ‘babel-polyfill‘, ‘classnames‘, ‘react‘, ‘react-dom‘, ‘axios‘, ‘react-router‘, ‘react-router-dom‘ ], app: ‘./src/app.jsx‘ }
(2)uglifyjs-webpack-plugin、CommonsChunkPlugin
使用插件實現優化壓縮功能:
webpackConfig.plugins = (webpackConfig.plugins || []).concat([ new webpack.DefinePlugin({ ‘process.env‘: { NODE_ENV: JSON.stringify(‘production‘) } }), new webpack.LoaderOptionsPlugin({ minimize: true }), //去除打包後代碼中的註釋等信息 new UglifyJsPlugin({ uglifyOptions: { output: { comments: false }, compress: true } }), //添加打包文件時的時間戳 new webpack.BannerPlugin(bannerTxt), //公共代碼抽取 new webpack.optimize.CommonsChunkPlugin({ name: "vender", minChunks: Infinity }) ]);
webpack-bundle-analyzer 配置方法
webpack 代碼優化壓縮方法