在vue-cli中如何實現webpack2專案打包優化-js教程-PHP中文網

首頁

web前端

js教程

在vue-cli中如何實現webpack2專案打包優化

亚连

Jun 07, 2018 pm 02:15 PM

vue-cli最佳化打包

下面我就為大家分享一篇vue-cli webpack2專案打包優化，具有很好的參考價值，希望對大家有幫助。

減少檔案搜尋範圍

#設定resolve.modules

Webpack的resolve.modules配置模組庫（即node_modules）所在的位置，在js 裡出現import 'vue' 這樣不是相對、也不是絕對路徑的寫法時，會去node_modules 目錄下找。但是預設的配置，會採用向上遞歸搜尋的方式去尋找，但通常專案目錄裡只有一個node_modules，且是在專案根目錄，為了減少搜尋範圍，可以直接寫明node_modules 的全路徑；同樣，對於別名( `alias)的配置，亦當如此：

function resolve (dir) {
 return path.join(__dirname, &#39;..&#39;, dir)
}
module.exports = {
 resolve: {
 extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
 modules: [
  resolve(&#39;src&#39;),
  resolve(&#39;node_modules&#39;)
 ],
 alias: {
  &#39;vue$&#39;: &#39;vue/dist/vue.common.js&#39;,
  &#39;src&#39;: resolve(&#39;src&#39;),
  &#39;assets&#39;: resolve(&#39;src/assets&#39;),
  &#39;components&#39;: resolve(&#39;src/components&#39;),
  // ...
  &#39;store&#39;: resolve(&#39;src/store&#39;)
 }
 },
 ...
}

合理設定test & include & exclude

test：必須滿足的條件（正規表示式，不要加引號，符合要處理的檔案）

exclude：無法滿足的條件（排除不處理的目錄）

include：匯入的檔案將由載入程式轉換的路徑或檔案陣列（把要處理的目錄包括進來）

這可以減少不必要的遍歷，從而減少效能損失。

替換程式碼壓縮工具

##Webpack 預設提供的UglifyJS 插件，由於採用單執行緒壓縮，速度慢；

webpack-parallel-uglify- plugin 插件可以並行運行UglifyJS 插件，更充分且合理的使用CPU 資源，這可以大大減少的建置時間；

當然，該插件應用於生產環境而非開發環境，安裝插件後，進行如下設定：

// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
//  warnings: false,
//  drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require(&#39;webpack-parallel-uglify-plugin&#39;);
new ParallelUglifyPlugin({
 cacheDir: &#39;.cache/&#39;, // 设置缓存路径，不改动的调用缓存，第二次及后面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外掛程式：把指定資料夾下的檔案複製到指定的目錄；其配置如下：

var CopyWebpackPlugin = require(&#39;copy-webpack-plugin&#39;)
plugins: [
 ...
 // copy custom static assets
 new CopyWebpackPlugin([
 {
  from: path.resolve(__dirname, &#39;../static&#39;),
  to: config.build.assetsSubDirectory,
  ignore: [&#39;.*&#39;]
 }
 ])
]
DllPlugin & DllReferencePlugin

Dll這個概念應該是藉鏡了Windows系統的dll。一個dll套件，就是一個純純的依賴函式庫，它本身不能運行，是用來給你的app引用的。

打包dll的時候，Webpack會將所有包含的庫做一個索引，寫在一個manifest檔中，而引用dll的程式碼（dll user）在打包的時候，只需要讀取這個manifest文件，就可以了。

一、在專案build資料夾下新增檔案webpack.dll.conf.js，內容如下

var path = require(&#39;path&#39;)
var webpack = require(&#39;webpack&#39;)
module.exports = {
 entry: {
 vendor: [ // 这里填写需要的依赖库
  &#39;babel-polyfill&#39;,
  &#39;axios&#39;,
  &#39;vue/dist/vue.common.js&#39;,
  &#39;vue-router&#39;,
  &#39;pingpp-js&#39;,
  "region-picker"
 ]
 },
 output: {
 path: path.resolve(__dirname, &#39;../static/js&#39;),
 filename: &#39;[name].dll.js&#39;,
 library: &#39;[name]_library&#39;
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: &#39;vue-loader&#39;
  },
  {
  test: /\.js$/,
  loader: &#39;babel-loader&#39;,
  exclude: /node_modules/
  }
 ]
 },
 plugins: [
 new webpack.optimize.ModuleConcatenationPlugin(),
 new webpack.DllPlugin({
  path: path.join(__dirname, &#39;.&#39;, &#39;[name]-manifest.json&#39;),
  libraryTarget: &#39;commonjs2&#39;,
  name: &#39;[name]_library&#39;
 }),
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  }
 })
 ]
}

二、在webpack.prod.conf.js檔案裡外掛程式部分新增：

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

三、在專案根目錄index.html檔案中新增：

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

四、在package.json裡打包dll新增指令

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

五、指令順序

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: &#39;babel-loader?cacheDirectory=true&#39;,

15s->14s

設定noParse

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

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

上面是我整理給大家的，希望今後會對大家有幫助。

在Vue2.0中實作使用者權限控制

透過vue.js實作微信支付

詳解如何實作vuex（詳細教學）#

以上是在vue-cli中如何實現webpack2專案打包優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。