vue-cli webpack2項目打包優化

時間 2019-11-11

標籤 vue cli webpack2 webpack 項目打包優化简体版

原文原文鏈接

減少文件搜索範圍

配置 resolve.modules

Webpack的resolve.modules配置模塊庫（即 node_modules）所在的位置，在 js 裏出現 import 'vue' 這樣不是相對、也不是絕對路徑的寫法時，會去 node_modules 目錄下找。可是默認的配置，會採用向上遞歸搜索的方式去尋找，但一般項目目錄裏只有一個node_modules，且是在項目根目錄，爲了減小搜索範圍，能夠直接寫明 node_modules 的全路徑；一樣，對於別名(`alias)的配置，亦當如此：html

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      // ...
      'store': resolve('src/store')
    }
  },
  ...
}

合理設置 test & include & exclude

test：必須知足的條件（正則表達式，不要加引號，匹配要處理的文件）
exclude：不能知足的條件（排除不處理的目錄）
include：導入的文件將由加載程序轉換的路徑或文件數組（把要處理的目錄包括進來）vue

這能夠減小沒必要要的遍歷，從而減小性能損失。node

替換代碼壓縮工具

Webpack 默認提供的 UglifyJS 插件，因爲採用單線程壓縮，速度慢；webpack

webpack-parallel-uglify-plugin 插件能夠並行運行 UglifyJS 插件，更加充分而合理的使用 CPU 資源，這能夠大大減小的構建時間；ios

固然，該插件應用於生產環境而非開發環境，安裝插件後，進行以下配置：web

// 刪掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
//   compress: {
//     warnings: false,
//     drop_console: true
//   },
//   sourceMap: true
// }),

// 增長 webpack-parallel-uglify-plugin來替換
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
  cacheDir: '.cache/',   // 設置緩存路徑，不改動的調用緩存，第二次及後面build時提速
  uglifyJS:{
    output: {
      comments: false
    },
    compress: {
      warnings: false
    }
  }
})

也試了一下同類型插件 webpack-uglify-parallel，但並無webpack-parallel-uglify-plugin效果好（可能因項目而異，在你們項目中可使用對比）。
webpack-parallel-uglify-plugin 插件相對 UglifyJsPlugin 打出的包略大（可是不明顯）；這裏的提速和增長的體積相比，我選擇了追求速度（使用後我從40秒降到了19秒）。正則表達式

拷貝靜態文件

使用copy-webpack-plugin插件：把指定文件夾下的文件複製到指定的目錄；其配置以下：vue-router

var CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
  ...
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }
  ])
]

DllPlugin & DllReferencePlugin

Dll這個概念應該是借鑑了Windows系統的dll。一個dll包，就是一個純純的依賴庫，它自己不能運行，是用來給你的app引用的。npm

打包dll的時候，Webpack會將全部包含的庫作一個索引，寫在一個manifest文件中，而引用dll的代碼（dll user）在打包的時候，只須要讀取這個manifest文件，就能夠了。element-ui

1、在項目build文件夾下新增文件webpack.dll.conf.js，內容以下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: {
    vendor: [  //  這裏填寫須要的依賴庫
      'babel-polyfill',
      'axios',
      'vue/dist/vue.common.js',
      'vue-router',
      'pingpp-js',
      "region-picker"
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      libraryTarget: 'commonjs2',
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

2、在webpack.prod.conf.js文件裏插件部分添加：

plugins: [
  ...
  // copy custom static assets
    new webpack.DllReferencePlugin({
       context: path.resolve(__dirname, '..'),
       manifest: require('./vendor-manifest.json')
    })
]

3、在項目根目錄index.html文件中添加：

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script  src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>     //添加這句，路徑可根據所需修改
</body>

4、在package.json裏打包dll添加命令

"build:dll": "webpack --config build/webpack.dll.conf.js"

5、命令順序

npm run build:dll //打包一次以後依賴庫無變更不須要執行

npm run build

優勢

Dll打包之後是獨立存在的，只要其包含的庫沒有增減、升級，hash也不會變化，所以線上的dll代碼不須要隨着版本發佈頻繁更新。

App部分代碼修改後，只須要編譯app部分的代碼，dll部分，只要包含的庫沒有增減、升級，就不須要從新打包。這樣也大大提升了每次編譯的速度。

假設你有多個項目，使用了相同的一些依賴庫，它們就能夠共用一個dll。

19s->15s

設置 babel 的 cacheDirectory 爲true

在webpack.base.conf.js中修改babel-loader：

loader: 'babel-loader?cacheDirectory=true',

15s->14s

設置 noParse

若是你肯定一個模塊中，沒有其它新的依賴，就能夠配置這項， Webpack 將再也不掃描這個文件中的依賴，這對於比較大型類庫，將能促進性能表現，具體能夠參見如下配置：

module: {
  noParse: /node_modules\/(element-ui\.js)/,
  rules: [
    {
      ...
    }
}

happypack

加上後沒太大的效果，可能用法有問題，有待深刻嘗試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。