Vue-cli 多頁相關配置記錄

搭建一個順手的MPA專案腳手架，其實根據專案的不同目錄結構和打包配置都可以進行靈活的調整，這次的專案可能是包含各種客戶端和管理后臺在一起的綜合專案所以需要將樣式和腳本做比較好的隔離，權限驗證可以使用統一的模塊，然后每個單獨SPA中根據需求再單獨實作資料或者功能權限的控制，

目錄結構

因為專案間的差異可能會比較大，所以除了基礎的依賴以及一些通用的Service.其他模塊之間需要做好隔離，每個Module 就是單獨的一個SPA，可以擁有自己的一套 Styles,Route,Store,Components，

總體擁有一些公用的腳本、Scss函式、靜態檔案等，

打包配置

為了達到盡可能的隔離，所以公共chunk只包含最基本的公共庫，比如Vue，但是 Vue-cli提供的默認打包配置，是比較適用于單頁應用的，

`splitChunk`

用于提取公共模塊，默認配置會將所有頁面引入的打包到chunk-vendors.js，然后將其他第三方公共庫都統一打包到chunk-common.js中去，這就導致了可能我這個頁面完全沒有用某個第三方庫（比如：element-ui），但是還是要載入相關資源，造成加載的極大浪費，
這里利用配置的minChunks欄位提取公共模塊，其他的都單獨載入，

  config.optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: "chunk-vendors",
          minChunks: 2,
          test: /node_modules/,
          priority: -10,
          chunks: "initial"
        },
        common: {}
      }
    });

`css.extract`

這里是否將樣式提取到統一的Css檔案，和之前一樣的問題每個頁面都需要單獨的Css，

  cssExtract = {
    filename: "style/[name].[hash:8].css",
    chunkFilename: "style/[name].[hash:8].css"
  };

如果有公共的第三方css,需要單獨配置，

`hard-source-webpack-plugin`

這個是為了提高打包效率的插件，通過快取dll使得二次加載速度提高了很多，

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin")
  configureWebpack: {
    // 快取dll,優化編譯速度
    plugins: [new HardSourceWebpackPlugin()]
  },

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/159140.html

標籤：JavaScript

上一篇：實作一個前端路由，如何實作瀏覽器的前進與后退？

下一篇：用一道大廠面試題帶你搞懂事件回圈機制