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

先说说我们要介绍一下DLLPlugin这个神奇的插件。它就像是Webpack中的“分身术”, Ke以将那些不会改变的第三方依赖打包到一个单独的dll文件中,这样一来主包的体积就Neng大大减小。
接着,我们再来聊聊SplitChunksPlugin这个插件。它是Webpack 4引入的一个新成员,Neng够根据特定的规则将代码分割成多个chunk。这样一来我们的主包体积也Neng跟着减小。
HTML5的preload和prefetch指令就像是给浏览器加上了一双“火眼金睛”, 没眼看。 它们Ke以帮助浏览器提前加载页面所需的资源,这样一来页面加载速度自然就快了。
配置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.${('@', '')}`;
}
}
}
})
}
};
设置入口文件 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') }) ] };
添加build:dll脚本
json
"scripts": {
"build:dll": "webpack --config webpack.dll.js"
}
总结一下。 配置configureWebpack选项 j*ascript const path = require('path');
module.exports = { configureWebpack: { plugins: } };,谨记...
使用preload和prefetch指令
html
通过以上方法,我们不仅让vendor包变得geng小、geng快,还提升了用户体验。快去试试吧,相信你会有意想不到的收获哦!