webpack优化 -- compression-webpack-plugin 开启gzip

打包的时候开启gzip可以大大减少体积，非常适合于上线部署。下面以vue-cli2.x项目为例，介绍如何在vue中开启gzip。（摘自网络：https://www.cnblogs.com/blogs-xlf/p/11365859.html）

步骤

安装 compression-webpack-plugin

注意，目前最新版需要运行在webpack4.0以上，如果你的webpack是3.x版本的，请安装compression-webpack-plugin的1.x版本(笔者安装的是1.1.12)。

npm install compression-webpack-plugin -D

改造vue项目配置

在config/index.js文件中修改productionGzip: true;

在build/webpack.prod.conf.js文件中的plugins添加下面的代码, vue-cli2.x默认已经写好了，则不用管



new CompressionWebpackPlugin({

      asset: '[path].gz[query]',

      algorithm: 'gzip',

      test: new RegExp(

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240,

      minRatio: 0.8

    })

查看压缩前后的大小对比

如果想知道压缩前后的大小情况，可以使用webpack-bundle-analyzer插件，vue-cli2.x默认引进的不用管。然后在package.json文件中添加下面的script命令:



"report":"npm run build --report=true"

另：
实际项目中的代码：

const needGzip = false

module.exports = {

.....................

chainWebpack: (config) => {

// 移除 prefetch 插件

config.plugins.delete('prefetch')

if (process.env.NODE_ENV === 'production') {

if (process.env.npm_config_report) {

config

.plugin('webpack-bundle-analyzer')

.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

}

if (needGzip) {

// GZip 生产环境 GZip

config.plugin('compressionPlugin')

.use(new CompressionPlugin({

filename: '[path].gz[query]',

algorithm: 'gzip',

test: /\.css$|\.ttf$|\.html$|\.svg$|\.json$|\.js$/,

threshold: 10240, // 只有大小大于该值的资源会被处理

minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理

deleteOriginalAssets: true// 删除原文件

})

)

}

.....................

lintOnSave: true

}

webpack 的externals配置

按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。

假设：以jquery为例子，目的是在runtime时通过cdn获取jquery依赖，在打包时忽略他的打包

步骤一：

//index.html

<script

  src="https://code.jquery.com/jquery-3.1.0.js"

  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="

  crossorigin="anonymous">

</script>

步骤二：

//webpack.config.js

module.exports = {

  //...

  externals: {

    jquery: 'jQuery'

    //将需要忽略打包的都写在这个里面，但前提是index.html文件里面必须script引入

  }

};

//属性名jquery指的是  import  $ from 'jquery'中的  'jquery'

属性值 jQuery指的是jquery插件暴露出来的全局对象名。按理来说$应该也是可以写在属性值里面的，（也是jquery暴露的啊，但我没试过行不行）

步骤三：

文件中的

import $ from 'jquery';

千万不能去掉。  很重要，好多人就是把它去掉了跑过来问我为啥我的还是报错jquery is  undefined。

vue项目：

module.exports={

..........

configureWebpack: {

externals: {

vue: 'Vue',

'vue-router': 'VueRouter',

vuex: 'Vuex',

'element-ui': 'ELEMENT',

echarts: 'echarts'

plugins:[],

.........

}

巴特西

webpack做项目优化

webpack优化 -- compression-webpack-plugin 开启gzip

步骤

安装 compression-webpack-plugin

改造vue项目配置

查看压缩前后的大小对比

webpack 的externals配置

最新文章

热门文章