网站左右箭头素材,济南做网站公司,开发做网站公司,大屯街道网站建设背景 最近自己整了一个基于webpack4和react开发的博客demo项目#xff0c;一路整下来磕磕碰碰但也实现了功能#xff0c;就准备发到阿里云上面去看看#xff0c;借用了同事的阿里云小水管服务器#xff0c;配置完成之后首页加载花了十几秒#xff0c;打开控制台network查看…背景 最近自己整了一个基于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和highlightjscrypto是一个加密算法库提供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.jsmodule.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.jsconst 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
