vue項目webpack打包

 

之前一篇隨筆寫到vue多環境打包環境配置：https://www.cnblogs.com/shun1015/p/13411636.html

1.區分vue腳手架版本，版本不同，項目結構不同，多環境變量配置方式不同

• package.json文件里 scripts對象上配置打包命令

2.打包后的代碼如何運行

• 不能直接雙擊index.html文件直接運行
• 放到http容器里運行 serve，相當於在本地起一個服務，讓打包后的代碼運行在服務上

npm i -g serve  

• 全局安裝好后，打包項目為dist文件夾，然后在package.json的 script 中添加一行npm腳本：

"serve": "serve ./build"

npm run serve

• 會在命令行下出現這句：INFO: Accepting connections at http://localhost:5000
• 在瀏覽器輸入http://localhost:5000即可查看到你打包好的項目(和發布到服務器上是一樣的)

注意：僅限hash路由模式，history模式的會請求到后端，需要后端配置，否則頁面404

3.打包制定不同的環境變量

• 關於vue_cli3版本以上，之前有一篇博客詳細寫過
• npm run build，npm run build:dev，npm run build:test，
• 當process.env.NODE_ENV === 'production'時，會對代碼進行壓縮，為deveopment時不會

• 4.打包手動配置文件

• vue_cli基於webpack
• vue-cli零配置，腳手架3以上
• 子域名處理：項目根目錄新建publicPath: 配置子域名路徑，之前我是在router里面

5.大文件打包處理

1. 開發環境打包：npm run build:dev dist文件不會被壓縮

2. 生產環境打包：npm run build:prod dist文件會被壓縮（壓縮，注釋，空格），每個js文件會對應的.map文件，.map文件作為映射，方便瀏覽器調試

   配置productionSourceMap屬性，可根據環境變量判斷

   productionSourceMap: false

3. dist文件大，排除第三方包，使用cdn資源，配置webpack

//配置webpack,排除第三方包
  configureWebpack: config => {
    Object.assign(config, {
      externals: {
        element: 'element-ui'
      },
      // externals: {
      //     /**
      //     *key: main.js中全局引入的路徑
      //     *value: 全局暴露出來的對象名
      //     */
      //   "cesium/Cesium": "Cesium" //忽略js
      //   "cesium/Widgets/widgets.css": "Widgets" //忽略css
      // }
      })
    }

6.gzip進一步壓縮

npm i compression-webpack-plugin

• 借助CompressionWebpackPlugin插件來提前對文件進行Gzip壓縮

• 這樣服務器查找到有與源文件同名的.gz文件就會直接讀取，不會主動壓縮，降低cpu負載，優化了服務器性能

let CompressionWebpackPlugin = require("compression-webpack-plugin")
​
configureWebpack: config => {
    let plugins = [
      new CompressionWebpackPlugin({
        // filename: '[path].gz[query]',  //注意這里有坑，（asset 改為 filename）
        algorithm: 'gzip', //壓縮方式
        test: /\.js$|\.css$/,  //需要壓縮的文件
        threshold: 10240,  //大於10k的 進行壓縮
        // minRatio: 0.8     //壓縮比
      })
    ]
    if(process.env.NODE_ENV === 'production') {
      config.plugins = [...config.plugins, ...plugins]
    } else {}
  }

• 上述步驟配置完成后，再次執行 npm run build，有出現報錯

TypeError:Cannot read property 'thisCompilation' of undefined

• 查資料看，可能和插件的版本有關； 直接npm install后的版本：compression-webpack-plugin": “^7.1.2” 安裝時，控制台有警告提示：compression-webpack-plugin 和 webpack 的版本不匹配

• 試着 降低compression-webpack-plugin版本到1.1.12，打包成功

npm uninstall compression-webpack-plugin
npm install compression-webpack-plugin@1.1.12

• 資源發布到服務器或者本地使用serve服務，訪問時，通過抓包可看到 請求 和 響應 里都帶有gzip標記，性能最大化

7.將項目打包為安卓app

https://www.cnblogs.com/shun1015/p/14722365.html

8，路由的兩種模式（hash，history）

https://www.cnblogs.com/shun1015/p/12758779.html