配置路由延迟加载，封装异步组件引入的方法，并接收一个地址作为参数

/* * *返回异步组件* @tips，请注意页面只能挂载在views文件下，请不要通过webpack使用*/const asyncomponent hook=(path : string)3360 function=(): any={//inline comments。设置模块名让组件=import(/* webpackchunkname : ' view-[request]' */`@/view/$ { path }。vue `)；component . catch((e)={ console . error(e))；});返回组件；};配置代码压缩

//安装NPM安装uglifyjs-web pack-plugin//添加配置配置webpack :config={if (process。vue.config.js文件中的env . node _ env==' production '){//修改生产环境的配置.config.plugins.push(//生产环境自动删除控制台新uglifejsplugin({ uglife options 3360 { compression 3360 { warnings : false，drop_debugger: true，drop_console: true，}，}，sourceMap: false，parallel: true，})；}}，配置引用别名

设置插件的按需引入。本文使用元素-ui。单击查看详细信息

在完成一些基本配置后，让我们来看看当前的包装效果。

从下图可以看出，打包后最大的包是1.33M，再看请求，哇，217个请求，首页下载需要3.2M

好了，开始折腾吧

1.优化scss配置文件的引入

在构建项目的过程中，我们经常会提取一些SCS配置文件，比如主题颜色，然后将它们引入到每个需要的组件中。这将是繁琐的，所以我们可以帮助我们用sass-loader对其进行预处理。

这样，我们不需要在每一页都引入样式，我们可以直接引用它们。

例如，在我们的样式文件目录中有一个theme.scss，我们可以在vue.config.js中执行以下操作

//vue . config . js configure module . exports={ CSS : {//CSS预设配置项加载器选项3360 {//将选项传递给sass-loader sass : {//引入全局变量样式，@让我们设置别名，Execute src目录data : ` @ import ' @/style path/theme . scss '；`}}、}、}通过以上配置，您可以在组件模板中注释以下代码

style lang=' SCS '/* @ import ' @/style path/theme . SCS '；*//style2。优化请求数量

我们发现请求的数量增加了，因为在我们的页面上预先呈现了其他组件，并且像link rel=“prefetch”这样的东西会被插入到html页面中。我们应该如何优化这一点？

首先我们看vue.config.js的官方文档，点击Go。官方描述：是一种资源提示，用于告诉浏览器在页面加载后，利用空闲时间提前获取用户可能访问的内容。

因此，我们添加了以下配置

//vue . config . js module . exports={ chainwebpack 3360 config={//移除预加载插件config . plugins . delete(' prefetch ')//移除预加载插件config . plugins . delete(' preload ')；}}3.公共代码提取，使用cdn加载

适用于vue、vuex、vue路由器、axios等。我们可以使用wenpack的externals参数来配置它。在这里，我们设置我们只需要在生产环境中使用：

//vue。配置。jsconst是生产=过程。ENV。NODE _ ENV===' productionconst cdn={ css: []，js :[' https://cdn。bootcss。com/vue/2。5 .17/vue。运行时。量滴js '，' https://cdn。bootcss。com/vue-router/3。0 .1/vue-路由器。量滴js '，' https://cdn。bootcss。com/vuex/3。0 .1/vuex。量滴js '，'

！DOCTYPE html html lang=' zh ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '！-使用加拿大的半铸钢钢性铸铁(铸造半钢)文件- %用于(在HTMlWebPackplugin。选项。cdn HTMlWebPackplugin。选项。cdn。半铸钢钢性铸铁(Cast Semi-Steel)中的var I){ % link href=' %=html webpackkplugin。选项。cdn。CSS[I]% ' rel=' external nofollow ' rel=' external nofollow ' rel=' preload ' as=' style ' link href=' %=HTMlWebPackplugin。选项。cdn。CSS[I]% ' rel=' external no follow ' rel=' external-使用加拿大的射流研究…文件-%用于(HTMlWebPackplugin中的var I)。选项。cdn HTMlWebPackplugin。选项。cdn。js){ % link href=' %=HTMlWebPackLugin。选项。cdn。js[I]% ' rel=' external no follow ' rel=' preload ' as=' script ' % } %/head dy no script strong很抱歉，没有启用JavaScript，眼睛管理无法正常工作。请让它继续/strong/no script div id=' app '/div！内置文件将被自动注入- %(在HTMlWebPackLugin。选项。cdn HTMlWebPackLugin。选项。cdn。射流研究…中的var I){ % script src=' http :%=HTMlWebPackLugin。选项。cdn。js[I]% '/script % } %/body/html然后打包重启，我们再来看下目前的变化。

嗯，真香~从下图可以看到，打包出来后最大的包文件只有775kb。然后再看下请求，哇，43个请求、首页下载只需要140万英镑。

可以看出，我们这一系列的操作后请求数减少了174个，首页渲染减少了180万，真是可喜可贺

最后，附上完整的vue-config.js文件

const path=require(' path ')；const UglifyJsPlugin=require(' uglifyjs-web pack-plugin ')；const是生产=过程。ENV。NODE _ ENV===' productionconst cdn={ css: []，js :[' https://cdn。bootcss。com/vue/2。5 .17/vue。运行时。量滴js '，' https://cdn。bootcss。com/vue-router/3。0 .1/vue-路由器。量滴js '，' https://cdn。bootcss。com/vuex/3。0 .1/vuex。量滴js '，'

以上所述是小编给大家介绍的vue-cli 3配置打包优化要点详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！