当前位置:Gxlcms > JavaScript > 浅谈webpack打包之后的文件过大的解决方法

浅谈webpack打包之后的文件过大的解决方法

时间:2021-07-01 10:21:17 帮助过:17人阅读

这篇文章主要介绍了浅谈webpack打包之后的文件过大的解决方法,现在分享给大家,也给大家做个参考。

以前一直使用 create-react-app 这个脚手架进行 react 开发,后面因为一些自定义的配置,转而使用 webpack 搭建一套自己的脚手架。但是在使用 webpack 打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理 webpack 打包之后文件太大的情况,简单记录下来。

首先配置全局变量

首先,通过指定环境,告诉 webpack 我们当前处于 production 环境中,要按照 production 的方式去打包。

  1. //指定环境,将process.env.NODE_ENV环境与library关联
  2. new Webpack.DefinePlugin({
  3. 'process.env.NODE_ENV': JSON.stringify('production'),
  4. }),

优化 devtool 中的 source-map .

dev-tool 提供了很多种选项,用来增强我们 debug 的能力,我们熟知的有: source-map , inline-source-map , cheap-source-map 等等。详细的用法可以参考Devtool官方文档,Devtool配置对比 , webpack sourcemap 选项多种模式的一些解释 , https://webpack.github.io/docs/configuration.html#devtool 如果你的文件在打包之后突然变成好几M,那么不用想,肯定是因为 source-map 的原因。 source-map 在开发阶段确实很好用,调试起来很方便,但是在生产环境下就没必要部署了。 建议在 prod 环境下关闭 source-map 。

剥离css文件,单独打包

安装 webpack 插件 extract-text-webpack-plugin 。 npm install extract-text-webpack-plugin --save-dev 。 使用方法:

  1. plugins:[
  2. new ExtractTextPlugin('static/css/styles.[contenthash].css'),
  3. ]

这里使用了 contenthash , webpack 会根据内容去生成 hash 值。

使用 UglifyJSPlugin 压缩。

通过 UglifyJSPlugin 可以压缩我们的 *.js 文件。 安装方法: npm install uglifyjs-webpack-plugin --save-dev 。 用法: UglifyJSPlugin详细用法

  1. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  2. module.exports = {
  3. plugins: [
  4. new UglifyJSPlugin({
  5. parallel: 4,
  6. uglifyOptions: {
  7. output: {
  8. comments: false,
  9. beautify: false,
  10. },
  11. compress: {
  12. warnings: false
  13. },
  14. },
  15. cache: true,
  16. }),
  17. ]
  18. }

提取公共依赖

使用 CommonsChunkPlugin 插件,将多个 js 文件进行提取,建立一个独立的文件。这个文件包含一些共用模块,浏这样览器只在刚开始的时候加载一次,便缓存起来供后续使用。而不用每次访问一个新界面时,再去加载一个更大的文件。

  1. entry:{
  2. app:'./entry',
  3. vendor:['react','other-lib'],
  4. },
  5. plugins:[
  6. new Webpack.optimize.CommonsChunkPlugin({
  7. name: 'vendor',
  8. }),
  9. ]

开启gzip压缩

我们使用 compression-webpack-plugin 插件进行压缩。 安装: npm install compression-webpack-plugin --save-dev 。 compression-webpack-plugin 详细用法 使用:

  1. const CompressionPlugin = require("compression-webpack-plugin");
  2. plugins:[
  3. new CompressionPlugin({
  4. asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串
  5. algorithm: 'gzip',//算法
  6. test: new RegExp(
  7. '\\.(js|css)$' //压缩 js 与 css
  8. ),
  9. threshold: 10240,//只处理比这个值大的资源。按字节计算
  10. minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
  11. })
  12. ]

压缩结果:

开启html压缩,自动添加上面生成的静态资源

添加插件 html-webpack-plugin

安装: npm install html-webpack-plugin --save-dev 用法:

  1. plugins:[
  2. new HtmlWebpackPlugin({
  3. title: '',
  4. template: __dirname + '/../public/index.html',
  5. minify: {
  6. removeComments: true,
  7. collapseWhitespace: true,
  8. removeRedundantAttributes: true,
  9. useShortDoctype: true,
  10. removeEmptyAttributes: true,
  11. removeStyleLinkTypeAttributes: true,
  12. keepClosingSlash: true,
  13. minifyJS: true,
  14. minifyCSS: true,
  15. minifyURLs: true,
  16. },
  17. chunksSortMode:'dependency'
  18. }),
  19. ]

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

iview中Select 选择器多选校验方法

nodejs简单访问及操作mysql数据库的方法示例

vue-cli创建的项目,配置多页面的实现方法

以上就是浅谈webpack打包之后的文件过大的解决方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行