webpack做项目优化

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

打包的时候开启gzip可以大大减少体积，非常适合于上线部署。下面以vue-cli2.x项目为例，介绍如何在vue中开启gzip。（摘自网络：//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="//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:[],
………
}

VirMach 便宜 VPS

QNews

QNews