vue（2.52） webpack（3.6.0）優化

基於vuecli2腳手架搭建項目

運行 npm run build --report 分析文件大小

參考文檔

步驟(快速搭建)：

一、npm install -g @vue/cli-init
    二、vue init webpack my-project

三、cd my-project
    四、npm run dev

基於腳手架優化

1.路由懶加載（參考文檔）

//基本使用
const Foo = () => import('./Foo.vue');
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

2.定義絕對路徑

在webpack.base.conf.js文件中，咱們能夠在resolve中對項目的絕對路徑進行定義
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        '@': resolve('src'),
        'components': resolve('src/components'),
        'pages': resolve('src/pages')
    }
}

3.去掉打包生成的map文件（Source Maps只是方便調試，須要線上調試bug能夠開啓）

config/index.js修改
build下的productionSourceMap：false

4.所用的庫儘可能不要全局引入，能夠按需加載（elementUI，echarts等）

elementUI 按需引入參考文檔

//首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
//而後，將 .babelrc 修改成：
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",["component",{
     "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]
}
//接下來，若是你只但願引入部分組件，好比 Button 和 Select，那麼須要在 main.js 中寫入如下內容：
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
//組件中使用
import {Button} from "element-ui";
export default {
  name: 'App',
  components:{
    Button
  }
}

<Button type="primary">按鈕</Button>

echarts按需引入參考文檔

1. 全局引入
    npm install echarts -D
    在mian.js中
    import echarts from 'echarts' //引入echarts
    Vue.prototype.$echarts = echarts //引入組件
 2. 按需引入
    //引入基本模板
let echarts = require('echarts/lib/echarts')
 
// 引入折線圖等組件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// 引入提示框和title組件，圖例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//圖例翻譯滾動

Vue.prototype.$echarts = echarts

5.引入DllPlugin分離第三方依賴，（另一種方式cdn:暫時不作考慮，公司業務的緣由）

在使用webpack進行打包時候，對於依賴的第三方庫，好比vue，vuex等這些不會修改的依賴，咱們可讓它和咱們本身編寫的代碼分開打包，這樣作的好處是每次更改我本地代碼的文件的時候，webpack只須要打包我項目自己的文件代碼，而不會再去編譯第三方庫，那麼第三方庫在第一次打包的時候只打包一次，之後只要咱們不升級第三方包的時候，那麼webpack就不會對這些庫去打包，這樣的能夠快速的提升打包的速度。所以爲了解決這個問題，DllPlugin
和 DllReferencePlugin插件就產生了。

在項目根文件建立webpack_dll.config.js
//項目前引入包文件
首先執行：npm i clean-webpack-plugin add-asset-html-webpack-plugin -D

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // mode: 'production',
    entry: {
        //'element-ui'用按需引入方式這裏就不打成第三方包了
        vendor: ['vue/dist/vue.esm.js','vue-router']
    },
    output: {
        // 指定生成文件所在目錄
        // 因爲每次打包生產環境時會清空 dist 文件夾，所以這裏我將它們存放在了 public 文件夾下
        path: path.resolve(__dirname, 'public/vendor'),
        // 指定文件名
        filename: '[name].dll.js',
        // 存放動態連接庫的全局變量名稱，例如對應 lodash 來講就是 lodash_dll_lib
        // 這個名稱須要與 DllPlugin 插件中的 name 屬性值對應起來
        // 之因此在前面 _dll_lib 是爲了防止全局變量衝突
        library: '[name]_dll_lib'
    },
    plugins: [
        new CleanWebpackPlugin({
            context: __dirname,
            cleanOnceBeforeBuildPatterns: ['public/vendor']
        }),
        
        // 接入 DllPlugin
        new webpack.DllPlugin({
            // 描述動態連接庫的 manifest.json 文件輸出時的文件名稱
            // 因爲每次打包生產環境時會清空 dist 文件夾，所以這裏我將它們存放在了 public 文件夾下
            path: path.join(__dirname, 'public', 'vendor', '[name].manifest.json'),
            // 動態連接庫的全局變量名稱，須要和 output.library 中保持一致
            // 該字段的值也就是輸出的 manifest.json 文件 中 name 字段的值
            // 例如 lodash.manifest.json 中就有 "name": "lodash_dll_lib"
            name: '[name]_dll_lib'
        })
    ]
};
修改package.json文件，加入dll命令
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "dll": "webpack --config ./webpack_dll.config.js"
  }
運行npm run dll 
public就會生一個文件夾（vendor）包含兩個文件（vendor.dll.js 和vendor.manifest.json）;
//而後修改
build文件夾下的webpack.prod.conf.js
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
 plugins: [
    // // 引用 manifest.json
    new webpack.DllReferencePlugin({
      manifest: require('../public/vendor/vendor.manifest.json')
    }), 
    // // 將 dll 注入到 生成的 html 模板中
    new AddAssetHtmlPlugin({
      // 要添加到編譯中的文件的絕對路徑，以及生成的HTML文件。支持globby字符串
      filepath: path.resolve(__dirname, '../public/vendor/*.js'),
      // 文件輸出目錄
      outputPath: 'vendor',
      // 腳本或連接標記的公共路徑
      publicPath: 'vendor',
      includeSourcemap: false
    }),
    //拷貝到dist文件夾下去
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public/vendor'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
    ...
];
//而後運行npm run build 會報錯，Cannot read property 'compilation' of undefined
緣由是你如今安裝add-asset-html-webpack-plugin的版本是3.1.3是基於webpack4的，而咱們的項目是基於webpack3的因此須要降版本
npm uninstall --save-dev add-asset-html-webpack-plugin
npm install add-asset-html-webpack-plugin@2.1.3 --save-dev
而後執行npm run build就OK了

6.HappyPack優化打包速度(項目越大越明顯)

因爲運行在 Node.js 之上的 Webpack 是單線程模型的，因此Webpack 須要處理的事情須要一件一件的作，不能多件事一塊兒作。
咱們須要Webpack 能同一時間處理多個任務，發揮多核 CPU 電腦的威力，HappyPack 就能讓 Webpack 作到這點，它把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。

安裝 HappyPack
npm i -D happypack
修改build文件夾下的webpack.base.conf.js 文件
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //把對.js 的文件處理交給id爲happyBabel 的HappyPack 的實例執行
        loader: 'happypack/loader?id=happyBabel',
        //排除node_modules 目錄下的文件
        exclude: /node_modules/
      },
    ]
  },
plugins: [
    new HappyPack({
        //用id來標識 happypack處理那裏類文件
      id: 'happyBabel',
      //如何處理  用法和loader 的配置同樣
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享進程池
      threadPool: happyThreadPool,
      //容許 HappyPack 輸出日誌
      verbose: true,
    })
  ]
}

7.開啓 Gzip 壓縮（須要後臺配合tomcat或者Nginx）

config文件夾下的index.js文件
build：{
    productionGzip：true 
}

• 在 Loader 配置中，全部文件的處理都交給了 happypack/loader 去處理，使用緊跟其後的 querystring ?id=babel 去告訴 happypack/loader 去選擇哪一個 HappyPack 實例去處理文件。
• 在 Plugin 配置中，新增了兩個 HappyPack 實例分別用於告訴 happypack/loader 去如何處理 .js 和 .css 文件。選項中的 id 屬性的值和上面 querystring 中的 ?id=babel 相對應，選項中的 loaders 屬性和 Loader 配置中同樣。