一阱表、查看項(xiàng)目打包
webpack有個(gè)插件webpack-bundle-analyzer，可以查看項(xiàng)目一共打了多少包贡珊，每個(gè)包的體積最爬，每個(gè)包里面的包情況。
vue-cli 2.0已經(jīng)集成好了這個(gè)插件的配置
我們只需在package.json中添加命令
"scripts": {
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}
這樣即可查看包大小了门岔。
二爱致、路由懶加載
把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件寒随，這樣就更加高效了糠悯。
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
三、異步組件
在大型應(yīng)用中妻往，我們可能需要將應(yīng)用分割成小一些的代碼塊逢防，并且只在需要的時(shí)候才從服務(wù)器加載一個(gè)模塊。Vue 只有在這個(gè)組件需要被渲染的時(shí)候才會(huì)觸發(fā)該工廠函數(shù)蒲讯，且會(huì)把結(jié)果緩存起來供未來重渲染.
components: {
'my-component': () => import('./my-async-component')
}
這里注意：如果項(xiàng)目打包后的app.js包不超過1M的話忘朝，這里不建議使用異步加載組件。因?yàn)楫惒郊虞d每拆分一次就多一次http請求判帮，如果項(xiàng)目不是特別大的話反而會(huì)降低性能局嘁。所以app.js至少超過1M的時(shí)候才使用異步組件.
四、webpack的external功能
將項(xiàng)目中需要的一些公共依賴包晦墙，并且不常變動(dòng)的悦昵，單獨(dú)取出，不再每次都打包編譯晌畅。如vue但指、vue-router、vuex、axios用cdn中的文件代替棋凳，而不是直接打包到vendor中.這樣在有緩存的情況下拦坠，這些資源均走緩存，不必加載剩岳。
- 在index.html中引入js文件
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
- 去掉這些第三方j(luò)s的import
- 配置webpack.base.conf.js的externals選項(xiàng)
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選項(xiàng)的鍵值對(duì)如果配置錯(cuò)了這些大文件仍舊參與打包贞滨，導(dǎo)致優(yōu)化失敗。鍵拍棕，就是用npm install命令裝的插件名稱晓铆。值，就是插件對(duì)外提供的那個(gè)對(duì)象绰播，這個(gè)需要打開源碼看看骄噪。
五、實(shí)現(xiàn)elment-ui和echarts的按需加載
因?yàn)橹坝衅恼抡f到了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'
