vue项目打包webpack体积优化

一、查看项目打包
webpack有个插件webpack-bundle-analyzer，可以查看项目一共打了多少包，每个包的体积，每个包里面的包情况。
vue-cli 2.0已经集成好了这个插件的配置
我们只需在package.json中添加命令

"scripts": {
   "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}

这样即可查看包大小了。

二、路由懒加载
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了.

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

三、异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染.

components: {
    'my-component': () => import('./my-async-component')
}

四、webpack的external功能
将项目中需要的一些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译。如vue、vue-router、vuex、axios用cdn中的文件代替，而不是直接打包到vendor中.这样在有缓存的情况下，这些资源均走缓存，不必加载。

1. 在index.html中引入js文件

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

2. 去掉这些第三方js的import
3. 配置webpack.base.conf.js的externals选项

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  externals: {
    react:'React',
    vue: 'Vue',
    jquery:'jQuery'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  module: { }
}

注意：external选项的键值对如果配置错了这些大文件仍旧参与打包，导致优化失败。键，就是用npm install命令装的插件名称。值，就是插件对外提供的那个对象，这个需要打开源码看看。

五、实现elment-ui和echarts的按需加载
因为之前有篇文章说到了echarts的按需加载。这里只涉及elment-ui的按需加载

• 安装babel-plugin-component

npm install babel-plugin-component - D

• 修改.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "es2015","stage-2"
  ],
  "plugins": [
    "transform-runtime",
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
  ],

• 在main.js中按需引入

import { Menu, MenuItem,InputNumber,DatePicker,Popover,Badge,Select,Option } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'