vue如何优化首屏加载速度？

Elvira411
161 阅读2分钟

在Vue项⽬目中，引⼊入到⼯工程中的所有js、css⽂文件，编译时都会被打包进 vendor.js，浏览器器在加载该⽂文件之后才能开始显示⾸首屏。若是引⼊入的库众 多，那么vendor.js⽂文件体积将会相当的⼤大，影响⾸首屏的体验。 解决⽅方法是： 将引⽤用的外部js、css⽂文件剥离开来，不不编译到vendor.js中，⽽而是⽤用资源 的形式引⽤用，这样浏览器器可以使⽤用多个线程异步将vendor.js、外部的js等 加载下来，达到加速⾸首开的⽬目的。外部的库⽂文件，可以使⽤用CDN资源， 或者别的服务器器资源等。

几种常⽤用的优化⽅方法：

1. 使⽤用npm run build --report命令进⾏行行⼤大⽂文件定位

2. 路路由的按需加载

3. 将打包⽣生成后 index.html⻚页⾯面 ⾥里里⾯面的JS⽂文件引⼊入⽅方式放在 body 的 最后

4. ⽤用⽂文档的cdn⽂文件代替 npm 安装包

5. UI库的按需加载

6. 开启 Gzip 压缩

详解：

1. 大文件定位：

我们可以使⽤用 webpack可视化插件Webpack Bundle Analyzer查看 ⼯工程js⽂文件⼤大⼩小，然后有⽬目的的解决过⼤大的js⽂文件。 使⽤用命令： 
npm run build --report

  1. 路路由的按需加载

  2. 将JS⽂文件引⼊入⽅方式放在 body 的最后 :

默认情况下，build 后的 index.html 中，js 的引⼊入是在 head 中，使⽤用 html-webpack-plugin插件，将inject的值改为body。就可以将 js 引⼊入放到 body 最后。

⾸首先下载插件：（⼀一般vue-cli项⽬目⾥里里默认有，可以package.json⾥里里⾯面检查 是否含有）

npm install html-webpack-plugin@2 --save-dev

在 build⽂文件夹下webpack.base.conf.js配置：

    var htmlWebpackPlugin = require('html-webpack-
    plugin')
    module.exports = {
        entry: './src/script/main.js',
        output: {
            filename: 'js/bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: [
            new htmlWebpackPlugin({
                inject: 'body'
            })
        ]
    }

即在 plugins ⾥里里⾯面加上 htmlWebpackPlugin 插件。

  1. ⽤用⽂文档的cdn⽂文件代替 npm 安装包:

⽤用⽂文档的cdn⽂文件代替，⽽而不不⽤用打包到vender⾥里里⾯面去。具体的做法是：

1、在index.html⾥里里⾯面引⼊入依赖库js⽂文件

// index.html
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

2、在mian.js⾥里里⾯面去掉第三⽅方js的import,因为在第⼀一步已经通过script标签 引⽤用进来了了。

3、把第三⽅方库的js⽂文件从打包⽂文件⾥里里去掉

即在 build/webpack.base.conf.js⽂文件的module⾥里里⾯面与rules同层加⼊入 externals：

5、UI库的按需加载：一般 UI库 都提供按需加载的⽅方法，按照⽂文档即可配置。

6.、开启 Gzip 压缩

Gzip:

在 config/index.js 设置 productionGzip 为 true，开启 Gzip 压缩

avatar
文章
阅读
粉丝