最新版的 vue-cli + webpack 构建的 vue 项目在结构上有了一些变化。比如 build 文件夹下的 dev-server.js 文件消失了等,当然细心点同学可能会在 package.json 文件中发现
的身影,它的作用是分析项目打包后的各个资源的体积。
- webpack - bundle - analyzer
我们运行打包命令就知道它的功能了:
npm run build
结果如下图(PS:config/index.js 文件 => productionSourceMap: false):
打包后各个文件的大小
运行以下命令,即可查看可视化界面:
- npm run build--report
如下图所示:
文件大小的可视化界面
功能很强大,但也直戳痛点,为什么打包后的静态文件这么大,有没有方法优化一下打包后的体积呢?答案显然是有的。
下面进入正题,我总结了几个优化的方法:
配合 webpack 支持的懒加载方法有:
- resolve = >require([. / Foo], resolve)
- const Foo = () = >import('./Foo')
接下来我以官方文档的写法为例,演示一波:注意:如果使用的是 Babel,需要添加 syntax - dynamic - import 插件,才能使 Babel 可以正确地解析语法。
原来没有使用路由懒加载时,你的 router/index.js 可能是这样的:
- import Vue from 'vue'
- import Router from 'vue-router'
- import Home from 'pages/home'
- ...
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'home',
- component: Home
- }
- ...
- ]
- })
当时有了路由懒加载,世界变得不同了:
- import Vue from 'vue'
- import Router from 'vue-router'
- // 其它都不用变,就是这么简单
- const Home = () => import('./home')
- ...
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'home',
- component: Home
- }
- ...
- ]
- })
设置路由懒加载后,我们再来看看打包的效果:
路由懒加载后
这时我们会看到,app.js 这个文件几乎减小了一半,但是会多出几个 js 文件,那是我们的另外几个路由页面的 js 文件。这些文件会在我们需要的时候,通过异步的方式加载进来,因此它们不会为首屏的加载增加负担。
既然路由可以懒加载,那么组件可否懒加载呢?
答案当然是可行的。
套路还是一样,使用:
- const Foo = () = >import('./Foo')
例如:
- // 组件懒加载
- const IconList = () => import('components/base/icon-list')
- export default {
- components: {
- IconList
- }
- }
那么组件懒加载之后,效果如何呢?见下图:
组件懒加载后
厉害了,app.js 文件直接变成了 1.83KB,此时又多出了几个 js。
同上,这些 js 是自定义组件的 js,我们可以用异步加载的方式加载进来的。
那么问题来了,难道用了懒加载真的可以为所欲为吗?就没有一点缺陷,答案当然是有的。
在实践中,通过懒加载,会遇到如下问题:
- 懒加载的元素将会延迟加载,这里的延迟指的是会出现滞后于其他同步元素的出现,甚至会出现页面闪一下的过程
- 如果一个页面中有许多嵌套的懒加载组件,那么网页中的元素会分先后渲染,层次不齐
因此,在平常的 vue 项目中,建议:
- 对于路由页面,最好进行懒加载;
- 对于路由页面中的各个组件实行按需进行懒加载。
如果组件不大并且使用不多,可直接在路由页面中导入,若组件较大或者使用比较频繁,建议使用组件懒加载。
现如今,关于 vue 的组件库真是百花齐放,如 mint-ui、element-ui、iview 以及 vux 等... 但是如果引入完整的组件库文件,那么打包后的 CSS 和 js 文件将会变得很大。拿 mint-ui 举个例子,引入完整的 mint-ui 和其 css 样式,打包后,如下图:
引入完整的 mint-ui
那么,使用按需加载会怎么样呢?先上代码:
- // main.js
- // 按需加载
- import { Spinner, Header, InfiniteScroll, Tabbar, TabItem, Lazyload } from 'mint-ui'
- Vue.use(Lazyload)
- Vue.use(InfiniteScroll)
- Vue.component(Header.name, Header)
- Vue.component(Spinner.name, Spinner)
- Vue.component(Tabbar.name, Tabbar)
- Vue.component(TabItem.name, TabItem)
当然,还需要安装
,这里省略了对. babelrc 的配置,详情参见 mint-ui 官方文档 。
- babel - plugin - component
这样,我们再来看看打包后的结果:
按需引入 mint-ui
根据上面两张图可以看出,vendor.js 减少了大约 80KB,app.css 减少了大约 30KB,那么这个 vendor.js 是干什么的呢?
vendor.js 是第三方库的集成,也就是我们在 package.json 中 "dependencies" 对象中的那些库以及一些必须的第三方库,现在知道为什么按需引入会减小 vendor.js 的体积了吧。
这样看来,如果项目中有引入 vue 的组件库,最好还是按需引入为佳。
来源: http://www.jianshu.com/p/6fb92ea1790d