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