前端项目优化01

前端项目优化01

1. webpack-bundle-analyzer 文件打包模块可视化插件

  该插件主要用于分析项目打包后的文件体积大小，

 

2.compression-webpack-plugin js文件gzip压缩插件

  该插件主要是用gzip算法来进一步压缩js文件（压缩空间≈70&）

 

 

现有项目配置：

 

package.json

// 新增两个依赖

"devDependencies": {

    "compression-webpack-plugin": "1.1.12", // 压缩

    "webpack-bundle-analyzer": "^3.3.2", // 可视化

}

 

// 新增npm执行指令

"scripts": {

"build:gzip": "cross-env NODE_ENV=production GZIP=true webpack --progress --hide-modules", // 生产打包且初始化压缩环境变量

"analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --progress --hide-modules", // 生产打包且初始化可视化环境变量

}

 

 

webpack.config.js

 

模块导入：

var BundleAnalyzerPlugin  = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

var CompressionPlugin = require('compression-webpack-plugin')

 

模块配置：

  if (process.env.ANALYZER) { // 可视化环境存在ANALYZER存在

    module.exports.plugins = module.exports.plugins.concat(new BundleAnalyzerPlugin())

  }

  if (process.env.GZIP) { // 文件压缩环境存在ANALYZER存在

    module.exports.plugins = module.exports.plugins.concat(new CompressionPlugin({

      algorithm: 'gzip',

      test: /\.js/,

      deleteOriginalAssets: true

    }))

  }

 

 

注释：

webpack3对应的compression-webpack-plugin版本只能是1.1.2

webpack4对应的compression-webpack-plugin版本^2.0.0

 

更新早上说的配置的一个问题，变更这个配置的原因主要是，怕nginx服务器那边没开启gzip功能，如果只打包.gz的文件，会导致访问异常，所以去掉这个属性会打包两份js代码，一份 .js ，一份是.js.gz，nginx服务器会根据相关配置来读取.js还是.js.gz的文件