Vue多页面优化踩坑记录

2020-01-13

最近优化之前的项目,从单页面拆分成了多页面,这里记录下整个踩坑过程。

拆分成多个页面

1.将原项目的单页面替换为多页面


这里我添加了index.htmluser.html两个页面。

2.配置vue.config.js

// vue.config.jsconst titles = require('./title.js')const glob = require('glob')const pages = {}glob.sync('./src/pages/**/main.js').forEach(path => {    const chunk = path.split('./src/pages/')[1].split('/main.js')[0]    pages[chunk] = {        entry: path,        template: 'public/index.html',        title: titles[chunk],        chunks: ['chunk-vendors', 'chunk-common', chunk]    }})module.exports = {    pages,    chainWebpack: config => config.plugins.delete('named-chunks'),    devServer: {        proxy: {            '/api': {                target: 'http://127.0.0.1:8080',                changeOrigin: true,                pathRewrite: { '^/api': '' }            }        }    }}

可以执行vue inspect查看完整配置信息:

路由懒加载

vue-router官方给出的示例如下,这里webpackChunkName如果不写打包时会自动生成序号代替。

//router/index.js{    path: '/about',    name: 'about',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  },

为了方便追踪打包情况最好写上,就可以看到about.[hash].js的大小了。

如果想要多个路由打包进一个js里,写同一个webpackChunkName即可

  {    path: '/another',    name: 'another',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/Another.vue')  }

打包后about.js文件变大了0.33Kb,多了一个页面。

引入代码分析BundleAnalyzerPlugin

npm i webpack-bundle-analyzer后修改vue.config.js配置

//vue.config.jsconst BundleAnalyzerPlugin = require("webpack-bundle-analyzer")  .BundleAnalyzerPlugin;const report = process.env.npm_config_report; module.exports = {  ...  configureWebpack: config => {    if (report) {      config.plugins.push(new BundleAnalyzerPlugin());    }  },  ... }

再在package.json中添加

  "scripts": {    ...    "analyze": "npm_config_report=true npm run build"  },

这里通过控制npm_config_report来显示分析页面,执行npm run analyze可以看到打包情况

提取第三方插件

上图可以看到vuevue-routervuex占据了大部分空间,它们和我们的实际开发无关,且不会经常变化,我们可以把它们单独提取出来,这样不用每次都重新打包,浏览器访问时因为并行加载和缓存会极大地提高访问效率。

常见的优化方法有两种:一是通过cdn搭配externals来实现,二是通过单独打包搭配DllReferencePlugin

简单说下两种优劣:
cdn+externals:配置简单,全环境下都可访问到cdn,如果不慎调用了打包文件内部的方法,可能会导致重复打包;
DllReferencePlugin:配置较复杂,需要手动生成dll,所有访问指向同一份dll,不会造成重复打包。

利用externals优化

1.简单的配置方法

最简单的做法就是将cdn手动添加到index.html

<body>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="app">&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="https: cdn.bootcss.com="" vue="" 2.6.10="" vue.min.js"="">&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="https: cdn.bootcss.com="" vue-router="" 3.1.3="" vue-router.min.js"="">&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="https: cdn.bootcss.com="" vuex="" 3.1.1="" vuex.min.js"=""/></script&nbsp;src="https:></script&nbsp;src="https:></div&nbsp;id="app"></body>

然后在vue.config.js中说明externals

&nbsp;configureWebpack:&nbsp;(config)&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.externals&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vue:&nbsp;'Vue',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vuex:&nbsp;'Vuex',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'vue-router':&nbsp;'VueRouter',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'alias-name':&nbsp;'ObjName'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;写法:&nbsp;中划线:&nbsp;上驼峰&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}},

这时再打包就没有这些依赖项了。

2.区分开发环境和正式环境

以上方法配置后,因为引入的是vue.min.js,会导致Vue DevTool无法使用,怎么办呢?

const&nbsp;isProduction&nbsp;=&nbsp;process.env.NODE_ENV&nbsp;===&nbsp;"production";...configureWebpack:&nbsp;(config)&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(isProduction){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.externals&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vue:&nbsp;'Vue',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vuex:&nbsp;'Vuex',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'vue-router':&nbsp;'VueRouter',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'alias-name':&nbsp;'ObjName'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;写法:&nbsp;中划线:&nbsp;上驼峰&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}},

正式环境才使用externals可以吗?可以,但是报错:

Uncaught&nbsp;TypeError:&nbsp;Cannot&nbsp;redefine&nbsp;property:&nbsp;$router

因为在index.html中已经引入过一次vue-router了,如果不把它放入externals,就会重复定义。

因此我们需要仅在正式环境中引入cdn,调整之前的代码:

//&nbsp;vue.config.jsconst&nbsp;cdn&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;css:&nbsp;[],&nbsp;&nbsp;&nbsp;&nbsp;js:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',&nbsp;&nbsp;&nbsp;&nbsp;],}module.exports={&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;chainWebpack:&nbsp;(config)&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isProduction)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;生产环境注入cdn&nbsp;+&nbsp;多页面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glob.sync("./src/pages/**/main.js").forEach(path&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;chunk&nbsp;=&nbsp;path.split("./src/pages/")[1].split("/main.js")[0];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.plugin("html-"&nbsp;+&nbsp;chunk).tap(args&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;args[0].cdn&nbsp;=&nbsp;cdn;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;args;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;},}

这一步在多页面模式下有个坑,官方有提到但是一句带过了——就是会存在多个 html-webpack-plugin实例,而config.plugin()必须接收准确的plugin名称,如果硬着头皮按照网上教程走,肯定会卡在这里。其实很简单,只要vue inspect --plugins就可以看到了

接下来,index.html处理下cdn参数就完成啦😝

<!DOCTYPE&nbsp;html><html&nbsp;lang="en">&nbsp;&nbsp;<head>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="utf-8">&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="X-UA-Compatible"&nbsp;content="IE=edge">&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;name="viewport"&nbsp;content="width=device-width,initial-scale=1.0">&nbsp;&nbsp;&nbsp;&nbsp;<link&nbsp;rel="icon"&nbsp;href="<%=&nbsp;BASE_URL&nbsp;%>favicon.ico">&nbsp;&nbsp;&nbsp;&nbsp;<title><%=&nbsp;htmlWebpackPlugin.options.title&nbsp;%/></title>&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;使用CDN的CSS文件&nbsp;-->&nbsp;&nbsp;&nbsp;&nbsp;<%&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;htmlWebpackPlugin.options.cdn&nbsp;&amp;&amp;&nbsp;htmlWebpackPlugin.options.cdn.css)&nbsp;{&nbsp;%>&nbsp;&nbsp;&nbsp;&nbsp;<link&nbsp;href="<%=&nbsp;htmlWebpackPlugin.options.cdn.css[i]&nbsp;%>"&nbsp;rel="preload"&nbsp;as="style"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;<link&nbsp;href="<%=&nbsp;htmlWebpackPlugin.options.cdn.css[i]&nbsp;%>"&nbsp;rel="stylesheet"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;<%&nbsp;}&nbsp;%>&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;使用CDN的JS文件&nbsp;-->&nbsp;&nbsp;&nbsp;&nbsp;<%&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;htmlWebpackPlugin.options.cdn&nbsp;&amp;&amp;&nbsp;htmlWebpackPlugin.options.cdn.js)&nbsp;{&nbsp;%>&nbsp;&nbsp;&nbsp;&nbsp;<link&nbsp;href="<%=&nbsp;htmlWebpackPlugin.options.cdn.js[i]&nbsp;%>"&nbsp;rel="preload"&nbsp;as="script"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;<%&nbsp;}&nbsp;%>&nbsp;&nbsp;</%&nbsp;}&nbsp;%></link&nbsp;href="<%=&nbsp;htmlWebpackPlugin.options.cdn.js[i]&nbsp;%></%&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;htmlWebpackPlugin.options.cdn&nbsp;&amp;&amp;&nbsp;htmlWebpackPlugin.options.cdn.js)&nbsp;{&nbsp;%></%&nbsp;}&nbsp;%></link&nbsp;href="<%=&nbsp;htmlWebpackPlugin.options.cdn.css[i]&nbsp;%></link&nbsp;href="<%=&nbsp;htmlWebpackPlugin.options.cdn.css[i]&nbsp;%></%&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;htmlWebpackPlugin.options.cdn&nbsp;&amp;&amp;&nbsp;htmlWebpackPlugin.options.cdn.css)&nbsp;{&nbsp;%></link&nbsp;rel="icon"&nbsp;href="<%=&nbsp;BASE_URL&nbsp;%></meta&nbsp;name="viewport"&nbsp;content="width=device-width,initial-scale=1.0"></meta&nbsp;http-equiv="X-UA-Compatible"&nbsp;content="IE=edge"></meta&nbsp;charset="utf-8"></head>&nbsp;&nbsp;<body>&nbsp;&nbsp;&nbsp;&nbsp;<noscript>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>We're&nbsp;sorry&nbsp;but&nbsp;vue-multiple-pages-demo&nbsp;doesn't&nbsp;work&nbsp;properly&nbsp;without&nbsp;JavaScript&nbsp;enabled.&nbsp;Please&nbsp;enable&nbsp;it&nbsp;to&nbsp;continue.</strong>&nbsp;&nbsp;&nbsp;&nbsp;</noscript>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="app">&nbsp;&nbsp;&nbsp;&nbsp;<%&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;htmlWebpackPlugin.options.cdn&nbsp;&amp;&amp;&nbsp;htmlWebpackPlugin.options.cdn.js)&nbsp;{&nbsp;%>&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="<%=&nbsp;htmlWebpackPlugin.options.cdn.js[i]&nbsp;%>">&nbsp;&nbsp;&nbsp;&nbsp;<%&nbsp;}&nbsp;%>&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;built&nbsp;files&nbsp;will&nbsp;be&nbsp;auto&nbsp;injected&nbsp;-->&nbsp;&nbsp;</%&nbsp;}&nbsp;%></script&nbsp;src="<%=&nbsp;htmlWebpackPlugin.options.cdn.js[i]&nbsp;%></%&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;htmlWebpackPlugin.options.cdn&nbsp;&amp;&amp;&nbsp;htmlWebpackPlugin.options.cdn.js)&nbsp;{&nbsp;%></div&nbsp;id="app"></body>

</html lang="en">

利用dllPlugin优化

前面提到也可以用dllPlugin来优化,不过如果你使用chromeVue DevToolvue就不能放进dllPlugin了。

1.创建webpack.dll.conf.js

const&nbsp;path&nbsp;=&nbsp;require('path')const&nbsp;webpack&nbsp;=&nbsp;require('webpack')const&nbsp;{CleanWebpackPlugin}&nbsp;=&nbsp;require('clean-webpack-plugin')//&nbsp;dll文件存放的目录const&nbsp;dllPath&nbsp;=&nbsp;'public/vendor'module.exports&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;entry:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;core:&nbsp;['vue-router','vuex'],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;other:&nbsp;[],&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;output:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;path.join(__dirname,&nbsp;dllPath),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filename:&nbsp;'[name].dll.js',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;vendor.dll.js中暴露出的全局变量名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;保持与&nbsp;webpack.DllPlugin&nbsp;中名称一致&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;library:&nbsp;'[name]_[hash]',&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;plugins:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;清除之前的dll文件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;"clean-webpack-plugin":&nbsp;"^1.0.0"&nbsp;&nbsp;注意版本不同的写法不同&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;new&nbsp;CleanWebpackPlugin(['*.*'],&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;root:&nbsp;path.join(__dirname,&nbsp;dllPath),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;}),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;"clean-webpack-plugin":&nbsp;"^3.0.0"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;CleanWebpackPlugin(),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;设置环境变量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;webpack.DefinePlugin({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'process.env':&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NODE_ENV:&nbsp;'production',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;manifest.json&nbsp;描述动态链接库包含了哪些内容&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;webpack.DllPlugin({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;path.join(__dirname,&nbsp;dllPath,&nbsp;'[name]-manifest.json'),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;保持与&nbsp;output.library&nbsp;中名称一致&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'[name]_[hash]',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context:&nbsp;process.cwd(),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),&nbsp;&nbsp;&nbsp;&nbsp;],}

2.预编译dll
package.json中添加

script:{&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;"dll":&nbsp;"webpack&nbsp;-p&nbsp;--progress&nbsp;--config&nbsp;./webpack.dll.conf.js"}

运行npm run dll就可以在public/vendor下生成dll了。

3.在webpack中声明预编译部分
声明后webpack打包时就会跳过这些dll。

//&nbsp;vue.config.js&nbsp;&nbsp;configureWebpack:&nbsp;config&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isProduction)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.externals&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vue:&nbsp;"Vue"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;vuex:&nbsp;"Vuex",&nbsp;这些都改成dllPlugin编译&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;"vue-router":&nbsp;"VueRouter"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'alias-name':&nbsp;'ObjName'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;写法:&nbsp;中划线:&nbsp;上驼峰&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;config.plugins.push(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;名称要和之前的一致,可以继续扩展多个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...["core"].map(name&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;webpack.DllReferencePlugin({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context:&nbsp;process.cwd(),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manifest:&nbsp;require(`./public/vendor/${name}-manifest.json`)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;);&nbsp;&nbsp;},

4.引用dll
最后就是引入到index.html中,你可以简单地直接写入:

&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src=. vendor="" core.dll.js="">

</script src=.>

如果想更智能些,就用用到add-asset-html-webpack-plugin,它能将生成在public/vendor下的dll自动注入到index.html中。

const&nbsp;AddAssetHtmlPlugin&nbsp;=&nbsp;require("add-asset-html-webpack-plugin");&nbsp;&nbsp;&nbsp;&nbsp;config.plugins.push(&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;将&nbsp;dll&nbsp;注入到&nbsp;生成的&nbsp;html&nbsp;模板中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;AddAssetHtmlPlugin({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;dll文件位置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filepath:&nbsp;path.resolve(__dirname,&nbsp;"./public/vendor/*.js"),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;dll&nbsp;引用路径&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;publicPath:&nbsp;"./vendor",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;dll最终输出的目录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outputPath:&nbsp;"./vendor"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;);&nbsp;&nbsp;},

大功告成!

最后

DEMO

地址:github.com/vita2333/vu…

每一个commit对应一个配置步骤,vue利用external引入,区分了开发和配置环境,其他的vue-router等都是用dllPlugin引入的,有需要的小伙伴可以去看看 :)

参考

github.com/Plortinus/v…
juejin.im/post/5cb041…
blog.csdn.net/neoveee/art…


原文链接:juejin.im

上一篇:如何优雅处理图片异常
下一篇:对象关系映射 Sequelize 入门
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部