一、查看项目打包
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')
}
这里注意：如果项目打包后的app.js包不超过1M的话，这里不建议使用异步加载组件。因为异步加载每拆分一次就多一次http请求，如果项目不是特别大的话反而会降低性能。所以app.js至少超过1M的时候才使用异步组件.
四、webpack的external功能
将项目中需要的一些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译。如vue、vue-router、vuex、axios用cdn中的文件代替，而不是直接打包到vendor中.这样在有缓存的情况下，这些资源均走缓存，不必加载。
- 在index.html中引入js文件
- 去掉这些第三方js的import
- 配置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'