背景

　　最近自己整了一個基于webpack4和react開發的博客demo項目，一路整下來磕磕碰碰但也實現了功能，就準備發到阿里云上面去看看，借用了同事的阿里云小水管服務器，配置完成之后首頁加載花了十幾秒，打開控制臺network查看資源，打包的js體積有將近6M，及其影響訪問體驗，于是就開始了優化的路。

?

原因和解決方法

　　在webpack的配置文件中，對公共js做了抽取，分別會打包出react-verdor.js和antd-verdor.js,優化前的antd-verdor足足有4m大小，估計是把antd組件全部加載下來了，順著這個思路查找解決方案。

optimization.splitChunks: {chunks: 'all',cacheGroups: {"react-vendor": {test: (module) => (/react/.test(module.context) || /redux/.test(module.context)|| /classnames/.test(module.context) || /prop-types/.test(module.context)),priority: 3,reuseExistingChunk: false},"antd-vendor": {// || /[\\/]node_modules[\\/]/.test(module.context)test: (module) => (/antd/.test(module.context)),priority: 2,reuseExistingChunk: false},}}

?

antd官方推薦按需加載，我開始也是根據官方推薦做的，在.babelrc做如下配置

{"plugins": [["import", {"libraryName": "antd","libraryDirectory": "es","style": "css" }]] }

不過事實是打包文件有4M，那肯定是配置錯了，繼續查找別的配置方法，終于找到一個管用的，在webpack配置文件中做如下配置（本質上還是自己太菜，不理解.babelrc）

{test: /\.(js|jsx)/,use: {loader:'babel-loader',options: {presets: ["env", "react", 'stage-0'],plugins: [['import', [{ libraryName: 'antd', style: true }]]]}},include: resolve('src')},

配置完成后進行打包，體積明顯變小了，antd-vendor.js的大小變成200多K。antd按需引入的問題解決后，看別的文件還是挺大的，于是決定把REACT中的組件也做成按需加載的方式，拆分更多的js出來，這里使用了react-loadable實現，拆分完成之后繼續打包，發現部分子js的體積明顯過大，繼續查找原因。

在瀏覽器中跳轉到對應的頁面查看加載的js，查看js文件中的注釋，發現有兩個第三方插件被我全部import進來了了，其實我永不到那么多，分別是

crypto和highlightjs，crypto是一個加密算法庫，提供md5和sha 256等經典加密算法，我這個項目中只在登錄時用到了一次加密密碼，而那個頁面對應的js有500多k，問題顯而易見，通過下面這個修改把問題解決了 //修改前 import crypto from ('crypto')module.exports = {MD5_SUFFIX: 'sskjtxdywdddzyjknn',md5: function (pwd) {let md5 = crypto.createHash('md5');return md5.update(pwd).digest('hex')}, }//修改后 const md5 = require("crypto-js/md5")module.exports = {MD5_SUFFIX: 'sskjtxdywdddzyjknn',md5: function (pwd) {return md5.update(pwd).digest('hex')}, }

?

解決引入highlightjs后文件的過大的的思路和上面類似，我選擇了直接加載hightlightjs保留核心功能后的壓縮代碼，size只有30k，而之前的默認import后的size有將近1M

?

還能優化嗎

前面發現的問題不外乎是由第三方庫造成的，解決了前面的問題后，此時的js體積已經從之前的6M降到1.8M了。那么還能繼續通過webpack配置來優化打包后的文件大小嗎?抱著這個疑問繼續查找解決方案，最后決定試一試這個文章說明的方法?

https://zhuanlan.zhihu.com/p/36280323

一頓操作下來打包出來的文件只減小了30K，最后再放上配置文件js的完整代碼，希望能有大佬提出建議，非常

//webpack.base.config.js module.exports = {/*entry: {app: './src/index.jsx',},*/output: {publicPath: process.env.NODE_ENV === config.prod.ENV? config.prod.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.jsx', '.json'],alias: {'@components': path.resolve(__dirname, '../src/components'),'@': resolve('src'),}},module: {rules: [{test: /\.(js|jsx)/,use: {loader: 'babel-loader',options: {presets: ["env", "react", 'stage-0'],plugins: [['import', [{ libraryName: 'antd', style: true }]]]}},include: resolve('src')},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: assetsPath('img/[name].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: assetsPath('media/[name].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: assetsPath('font/[name].[ext]')}},{test: /\.css$/,use: [{loader: 'style-loader'}, {loader: "css-loader",options: {name: "[path][name].[ext]",}}]},{test: /\.less$/,exclude: /node_modules/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader',]},{test: /\.less$/,include: /node_modules/,use: [MiniCssExtractPlugin.loader,'css-loader',{'loader': 'less-loader',options: {javascriptEnabled: true}}]}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css'}),new LodashModuleReplacementPlugin] }//webpack.prod.config.js const webpackConfig = merge(baseWebpackConfig, {entry: {app: './src/index.jsx',},mode: 'production',devtool: false,output: {path: config.prod.assetsRoot,filename: assetsPath('js/[name].[chunkhash].js'),chunkFilename: assetsPath('js/[name].[chunkhash].js'),},plugins: [new HtmlWebpackPlugin({filename: 'index.html',title: pkg.description,template: path.resolve(__dirname, '../index.html'),inject: true,minify: {removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,},}),new CopyWebpackPlugin([{from: path.resolve(__dirname, '../src/static'),to: config.prod.assetsSubDirectory,}])],optimization: {minimizer: [new UglifyJsPlugin(),new OptimizeCSSAssetsPlugin(),new TerserPlugin({terserOptions: {parse: {ecma: 8,},compress: {ecma: 5,warnings: false,comparisons: false,inline: 2,},mangle: {safari10: true,},output: {ecma: 5,comments: false,ascii_only: true,},},// Use multi-process parallel running to improve the build speed// Default number of concurrent runs: os.cpus().length - 1parallel: true,// Enable file cachingcache: true,sourceMap: false,}),],splitChunks: {chunks: 'all',cacheGroups: {"react-vendor": {test: (module) => (/react/.test(module.context) || /redux/.test(module.context)|| /classnames/.test(module.context) || /prop-types/.test(module.context)),priority: 3,reuseExistingChunk: false},"antd-vendor": {// || /[\\/]node_modules[\\/]/.test(module.context)test: (module) => (/antd/.test(module.context)),priority: 2,reuseExistingChunk: false},}}} })

?

感謝！

?

轉載于:https://www.cnblogs.com/haimianxiubaobao/p/10566799.html

總結

以上是生活随笔為你收集整理的记一次webpack4+react+antd项目优化打包文件体积的过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。