标签：repo pac ref chain 节点 文件 cti 引用 lse
去掉console的插件
//开发阶段不需要但是发布后需要用到的babel插件 const prodPlugins = [] if (process.env.NODE_ENV === ‘production‘) { prodPlugins.push(‘transform-remove-console‘) } module.exports = { presets: [["@vue/cli-plugin-babel/preset", { "modules": false }]], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], //发布时候要用到到插件 ...prodPlugins ] }
在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置
configureWebpack和chainWebpack的作用相同，唯一的区别就是他们修改webpack的配置方式不同
configureWebpack通过操作对象的形式，来修改默认的webpack配置
chainWebpack则是通过链式编程的形式
module.exports = { chainWebpack: config => {
config.when(process.env.NODE_ENV === ‘production‘, config => { config.entry(‘app‘).clear().add(‘./src/main-prod.js‘) }) config.when(process.env.NODE_ENV === ‘development‘, config => { config.entry(‘app‘).clear().add(‘./src/main-dev.js‘) }) } }
将main.js复制一份，一份为main-prod.js和main.dev.js
默认情况下，通过import导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成后，单文件体积过大的问题
可以通过webpack的externals来配置并加载外部的CDN资源。
凡是声明在externals中的第三方依赖包，都不会被打包。
第一步 配置externals
module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === ‘production‘, config => { config.entry(‘app‘).clear().add(‘./src/main-prod.js‘) //配置externals config.set(‘externals‘, { vue: ‘Vue‘, ‘vue-router‘: ‘VueRouter‘, axios: ‘axios‘, lodash: ‘_‘, nprogress: ‘NProgress‘, ‘vue-quill-editor‘: ‘VueQuillEditor‘ }) }) config.when(process.env.NODE_ENV === ‘development‘, config => { config.entry(‘app‘).clear().add(‘./src/main-dev.js‘) }) } }
第二步 在public/index.html中引用静态资源
<!-- css -->
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<!-- js -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
记得引用之后去掉之前导入的css文件
虽然在开发阶段，我们用element-UI组件按需加载，尽可能的减少来打包的体积，但是那些按需加载的组件，仍然占用来
较大的体积。
此时，我们可以将element-UI的组件也通过CDN的方式来加载，进一步减小打包后的体积
第一步
在main-prod.js中注释掉按需加载的代码
第二步
在index.html中通过CDN添加
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
不同环境下，首页的内容会不同
module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === ‘production‘, config => { config.entry(‘app‘).clear().add(‘./src/main-prod.js‘) //配置externals config.set(‘externals‘, { vue: ‘Vue‘, ‘vue-router‘: ‘VueRouter‘, axios: ‘axios‘, lodash: ‘_‘, nprogress: ‘NProgress‘, ‘vue-quill-editor‘: ‘VueQuillEditor‘, ‘vue-moment‘: ‘VueMoment‘ }) //配置html参数 config.plugin(‘html‘).tap(args => { args[0].isProd = true return args }) }) config.when(process.env.NODE_ENV === ‘development‘, config => { config.entry(‘app‘).clear().add(‘./src/main-dev.js‘) //配置html参数 config.plugin(‘html‘).tap(args => { args[0].isProd = false return args }) }) } }
然后在html中
<title><%= htmlWebpackPlugin.options.isProd ? ‘‘ : ‘dev-‘ %>后台管理系统</title> <% if(htmlWebpackPlugin.options.isProd) { %> //CDN加载的资源 <% } %>
使用路由懒加载后如果文件过多，可以使用(个人喜好)
@babel/plugin-syntax-dynamic-import插件来管理路由文件分类
具体可以看官方文档
标签：repo pac ref chain 节点 文件 cti 引用 lse
原文地址：https://www.cnblogs.com/flyerya/p/11954257.html
