為什么要優化打包？

我們的目的

優化方式

1、 按需加載

1.1 路由組件按需加載

const router = [ {  path: '/index',  component: resolve => require.ensure([], () => resolve(require('@/components/index'))) }, {  path: '/about',  component: resolve => require.ensure([], () => resolve(require('@/components/about'))) }]

1.2 第三方組件和插件。按需加載需引入第三方組件

// 引入全部組件import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)// 按需引入組件import { Button } from 'element-ui'Vue.component(Button.name, Button)

1.3 對于一些插件，如果只是在個別組件中用的到，也可以不要在 main.js 里面引入，而是在組件中按需引入

// 在main.js引入import Vue from vueimport Vuelidate from 'vuelidate'Vue.use(Vuelidate)// 按組件按需引入import { Vuelidate } from 'vuelidate'

2、優化 loader 配置

module: { rules: [  {   test: //.js$/,   loader: 'babel-loader?cacheDirectory',   include: [resolve('src')]  } ]}

3、優化文件路徑——省下搜索文件的時間

 resolve: {  extensions: ['.js', '.vue', '.json'],  alias: {   'vue$': 'vue/dist/vue.esm.js',   '@': resolve('src'),  } },

4、生產環境關閉 sourceMap

5、代碼壓縮

兩種方法使用如下：

plugins: [ new UglifyJsPlugin({  uglifyOptions: {   compress: {    warnings: false   }  },  sourceMap: true,  parallel: true }), new ParallelUglifyPlugin({  //緩存壓縮后的結果，下次遇到一樣的輸入時直接從緩存中獲取壓縮后的結果并返回，  //cacheDir 用于配置緩存存放的目錄路徑。  cacheDir: '.cache/',  sourceMap: true,  uglifyJS: {   output: {    comments: false   },   compress: {    warnings: false   }  } })]