Vue-cli和Webpack打包發布優化指南

隨著 Web 前端技術的不斷發展，Vue.js 已經成為了一個非常受歡迎的前端框架。 Vue.js 中的 Vue-cli 和 Webpack 作為建置工具也成為了必要的配套工具。在開發專案時，我們通常會使用 Vue-cli 來建立應用程式框架，使用 Webpack 打包發布專案。但在大專案打包發佈過程中，由於專案體積龐大，可能會出現編譯速度慢、打包體積大、存取速度較慢等問題，為了避免這些問題的出現​​，本篇文章將介紹Vue-cli 和Webpack 打包發布優化指南，幫助開發者更好地優化大型專案的發布效果。

一、Vue-cli 專案最佳化

1. 按需引入第三方元件

在開發過程中，我們通常會使用jQuery、Bootstrap、 Echarts 等第三方函式庫，但是引入整個函式庫可能會造成打包體積過大，存取速度慢的問題。因此，我們可以使用 babel-plugin-component 外掛程式來進行按需引入。

在babel.config.js 中設定：

plugins: [
  ['component', {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
  }]
]

這裡以Element-ui 為例，使用外掛程式按需引入函式庫，可以大大減少打包體積。

2. 設定 Webpack 屬性

我們可以透過修改 vue.config.js 檔案來修改 Webpack 的設定屬性。以下是一些常用的Webpack 屬性的設定方法：

// 修改输出文件名格式
output: {
  filename: '[name].[hash].js'
}

// 修改 publicPath
publicPath: process.env.NODE_ENV === 'production' ?
  '/production-sub-path/' : '/'

// 压缩代码
uglifyOptions: {
  compress: {
    warnings: false,
    drop_console: true,
    drop_debugger: true,
    dead_code: true
  }
}

// 配置 externals，将大型的第三方库从打包代码中剥离
externals: {
  'vue': 'Vue',
  'jquery': 'jQuery',
  'bootstrap': 'Bootstrap',
  'echarts': 'echarts',
  'moment': 'moment'
}

// 使用 Webpack-bundle-analyzer 查看打包后的各个模块的大小
configureWebpack: {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

二、Webpack 最佳化

1. 使用多執行緒建構

##使用多執行緒建置可以大大提高打包速度，可以使用

happypack 外掛程式來實現多執行緒建置。使用該外掛程式需要先安裝happypack：

npm install happypack -D

接下來將原來的設定檔:

module: {
  rules: [
    {
      test: /.js$/,
      loader: 'babel-loader'
    },
    ...
  ]
}

修改為：

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      loader: 'happypack/loader?id=happyBabel'
    },
    ...
  ]
},
plugins: [
  new HappyPack({
    id: 'happyBabel',
    loaders: ['babel-loader'],
    threadPool: happyThreadPool,
    verbose: true
  })
]

這裡使用

happypack 外掛程式來啟用多執行緒建置。

使用DllPlugin 和DllReferencePlugin 技術

DllPlugin 和DllReferencePlugin 技術主要是將一些不常變動的函式庫單獨打包成一個lib 文件，這樣在每次打包時就不用再去打包這些庫文件，只需要在之後使用DllReferencePlugin 進行引入即可。

使用方法：

先設定DllPlugin：

1. const path = require('path');
   const webpack = require('webpack');
   const dllPath = 'static/dll';
   
   module.exports = {
     entry: {
       vendor: ['vue', 'vue-router', 'vuex', 'axios', 'lodash'] // 需要单独打包的库
     },
     output: {
       path: path.join(__dirname, `../${dllPath}`),
       filename: '[name].dll.js',
       library: '[name]_[hash]'  // 暴露全局变量，避免前后两次打包，库名字变更
     },
     plugins: [
       new webpack.DllPlugin({
         name: '[name]_[hash]',
         path: path.join(__dirname, `../${dllPath}`, 'manifest.json')
       })
     ]
   };

#執行打包：

2. cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules

############### #在###index.html### 中使用###3f1c4e4b6b16bbbd69b2ee476dc4f83a### 引入生成的庫檔案：######

<script src="<%= BASE_URL %>static/dll/vendor.dll.js"></script>

######設定DllReferencePlugin：##### #

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const path = require('path');

plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(path.join(__dirname, './static/dll/manifest.json'))
  }),
  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, './static/dll/*.dll.js')
  })
]

###該外掛程式可以在頁面中自動引入生成的Dll 檔案。 ######總結：######透過上述方法，我們可以對 Vue-cli 和 Webpack 進行最佳化，使得我們的專案打包體積更小、更快。當然，以上方法並不是銀彈，具體優化方法還需要根據專案的具體情況進行調整。希望這篇文章能對大家在進行專案打包發佈時有所幫助。 ###

以上是Vue-cli和Webpack打包發布優化指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！