在 vue 项目中, 引入到工程中的所有 js,CSS 文件, 编译时都会被打包进 vendor.js, 浏览器在加载该文件之后才能开始显示首屏. 若是引入的库众多, 那么 vendor.js 文件体积将会相当的大, 影响首屏的体验.
解决方法是, 将引用的外部 js,css 文件剥离开来, 不编译到 vendor.js 中, 而是用资源的形式引用, 这样浏览器可以使用多个线程异步将 vendor.js, 外部的 js 等加载下来, 达到加速首开的目的.
外部的库文件, 可以使用 CDN 资源, 或者别的服务器资源等.
下面来介绍几种方式:
1. 大文件定位
我们可以使用 webpack 可视化插件 Webpack Bundle Analyzer 查看工程 js 文件大小, 然后有目的的解决过大的 js 文件.
安装
npm install --save-dev webpack-bundle-analyzer
在 webpack 中设置如下, 然后 npm run dev 的时候会默认在浏览器上打开.
- const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
- module.exports = {
- plugins: [
- new BundleAnalyzerPlugin()
- ]
- }
如下图所示, 空间比较大的基本上都是文件比较大
2.JS 文件按需加载
如果没有这个设置, 项目首屏加载时会加载整个网站所有的 JS 文件, 所以将 JS 文件拆开, 点击某个页面时再加载该页面的 JS 是一个很好的优化方法.
这里用到的就是 vue 的组件懒加载. 在 router.js 中, 不要使用 import 的方法引入组件, 使用 require.ensure.
- import index from '@/components/index'
- const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
- // 如果写了第二个参数, 就打包到该 `/JS/index` 的文件中.
- // 不写第二个参数, 就直接打包在 `/JS` 目录下.
- const index = r => require.ensure( [], () => r (require('@/components/index')))
3. 将 JS 文件放在 body 的最后
默认情况下, build 后的 index.html 中, js 的引入是在 header 中.
使用 html-webpack-plugin 插件, 将 inject 的值改成 body. 就可以将 js 引入放到 body 最后.
- var HtmlWebpackPlugin = require('html-webpack-plugin');
- new HtmlWebpackPlugin({
- inject: 'body',
- })
4. 使用 cdn
打包时, 把 vue,vuex,vue-router,axios 等, 换用国内的 bootcdn 直接引入到根目录的 index.html 中.
在 webpack 设置中添加 externals, 忽略不需要打包的库.
- module.exports = {
- entry: {
- app: './src/main.js'
- },
- externals:{
- 'vue': 'Vue',
- 'vue-router': 'VueRouter',
- 'vuex':'Vuex'
- }
- // 格式为'aaa' : 'bbb', 其中, aaa 表示要引入的资源的名字, bbb 表示该模块提供给外部引用的名字, 由对应的库自定. 例如, vue 为 Vue,vue-router 为 VueRouter.
在 index.html 中使用 cdn 引入.
- <script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
- <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
- <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
- <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
去掉原有的引用, 否则还是会打包
- // 去掉 import, 如:
- //import Vue from 'vue'
- //import Router from 'vue-router'
- // 去掉 Vue.use(XXX), 如:
- //Vue.use(Router)
5. 压缩代码并移除 console
使用 UglifyJsPlugin 插件来压缩代码和移除 console.
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false,
- drop_console: true,
- pure_funcs: ['console.log']
- },
- sourceMap: false
- })
来源: http://www.qdfuns.com/article/18271/7ee9ae9b31c2e584dc949794458fd6f8.html