webpack做项目优化

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项目配置

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

1. 在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:[],

.........

}