Vue-cli 打包优化攻略：让 vendor 包瘦身，速度飞起！

前言

各位程序员大大们， 是不是在Vue-cli项目中，kan着那个巨大的vendor包发愁呢？别担心，今天小弟就来给大家分享一下如何让这个vendor包变得苗条、飞快！

一、 Webpack的DLLPlugin插件：打包第三方库的大法

先说说我们要介绍一下DLLPlugin这个神奇的插件。它就像是Webpack中的“分身术”， Ke以将那些不会改变的第三方依赖打包到一个单独的dll文件中，这样一来主包的体积就Neng大大减小。

二、 SplitChunksPlugin插件：代码分割的神奇力量

接着，我们再来聊聊SplitChunksPlugin这个插件。它是Webpack 4引入的一个新成员，Neng够根据特定的规则将代码分割成多个chunk。这样一来我们的主包体积也Neng跟着减小。

三、 preload和prefetch指令：加快页面加载的速度

HTML5的preload和prefetch指令就像是给浏览器加上了一双“火眼金睛”， 没眼看。 它们Ke以帮助浏览器提前加载页面所需的资源，这样一来页面加载速度自然就快了。

四、 具体操作步骤

  1. 配置webpack配置文件 j*ascript module.exports = { chainWebpack: config => { ({ chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { vendor: { test: /node_modules/, name(module) { const packageName = (/node_modules(.*?)(|$)/); return `npm.${('@', '')}`; } } } }) } };

  2. 设置入口文件 j*ascript const path = require('path'); const webpack = require('webpack');

    module.exports = { entry: { vendor: }, output: { path: path.resolve(dirname, 'dist'), filename: '.', library: 'library' }, plugins: library', path: path.resolve(dirname, 'dist', '-manifest.json') }) ] };

  3. 添加build:dll脚本 json "scripts": { "build:dll": "webpack --config webpack.dll.js" }

  4. 总结一下。 配置configureWebpack选项 j*ascript const path = require('path');

    module.exports = { configureWebpack: { plugins: } };，谨记...

  5. 使用preload和prefetch指令 html

通过以上方法，我们不仅让vendor包变得geng小、geng快，还提升了用户体验。快去试试吧，相信你会有意想不到的收获哦！