网站建设效益分析,隆尧建设局网站,在哪个网站注册域名好,wordpress获取分类别名文章目录一、移除console 策略1. 命令1.1. 插件官网#xff1a;1.2. 安装babel-plugin-transform-remove-console1.3. 在babel.config.js或者.babelrc文件中配置2. 图形化(推荐使用)2.1. 在线图形化安装插件2.2. 在babel.config.js或者.babelrc文件中配置二、生成打包报告1. 通…
文章目录一、移除console 策略1. 命令1.1. 插件官网1.2. 安装babel-plugin-transform-remove-console1.3. 在babel.config.js或者.babelrc文件中配置2. 图形化(推荐使用)2.1. 在线图形化安装插件2.2. 在babel.config.js或者.babelrc文件中配置二、生成打包报告1. 通过命令参数的形式生成报告1.1. 插件安装1.2. 分析生成的report.html2. 可视化UI面板直接查看报告(推荐使用)2.1. 启动ui界面2.2. ui界面总览三、打包配置个性化1. webpack配置项简述2. 为开发环境和发布环境指定不同打包入口2.1. 开发环境入口文件src/main-dev.js2.2. 开发环境入口文件src/main-prod.js2.3. 自定义webpack打包配置2.4. 通过chainwebpack自定义打包入口四、资源加载优化1. 具体参考配置2. 指定CDN引用3. 通过CDN优化ElementUI的打包3.1. 操作流程五、首页内容定制1. 插件配置12. 插件配置2六、路由异步懒加载1. 命令安装2. 图形化安装(推荐使用)3. 配置插件4. 组件引入方式修改5. 把组件按组分块一、移除console 策略
在企业内部 在dev开发环境中需要有console为了方便开发人员测试。 在发布环境中却不能出现console调用的方法。
1. 命令
1.1. 插件官网
https://www.npmjs.com/package/babel-plugin-transform-remove-console
1.2. 安装babel-plugin-transform-remove-console
npm install babel-plugin-transform-remove-console --save-dev1.3. 在babel.config.js或者.babelrc文件中配置
配置参数
{plugins: [transform-remove-console]
}企业内部完整配置(推荐使用) 由于这个文件属于全局的配置文件因此这里对打包环境做了判断此配置只在发布或者上线环境中启动
// 项目发布阶段用到的插件
const prodPlugins []
if (process.env.NODE_ENV productio) {prodPlugins.push(transform-remove-console)
}module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}],// 发布产品用到的插件数组...prodPlugins,]
}官网截图
2. 图形化(推荐使用)
2.1. 在线图形化安装插件
【依赖】-【添加依赖】-【开发依赖】搜索【babel-plugin-transform-remove-console】-【安装】
2.2. 在babel.config.js或者.babelrc文件中配置
企业内部完整配置(推荐使用) 由于这个文件属于全局的配置文件因此这里对打包环境做了判断此配置只在发布或者上线环境中启动
// 项目发布阶段用到的插件
const prodPlugins []
if (process.env.NODE_ENV productio) {prodPlugins.push(transform-remove-console)
}module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}],// 发布产品用到的插件数组...prodPlugins,]
}二、生成打包报告
打包时为了直观的发现项目中存在的问题可以在打包时生成报告通过报告分析项目中存在的问题。
1. 通过命令参数的形式生成报告
1.1. 插件安装
#通过vue-cli的命令选项可以生成打包报告
#--report选项可以生成report.html 以此来帮助分析打包内容
vue-cli-service build --report1.2. 分析生成的report.html 2. 可视化UI面板直接查看报告(推荐使用)
在可视化的UI面板中通过控制台和分析面板可以方便的清晰直观多角度看到项目中存在的问题。
2.1. 启动ui界面
vue ui2.2. ui界面总览 三、打包配置个性化
1. webpack配置项简述
通过vue-cli 3.0 工具生成的项目默认隐藏了所有的webpack的配置项目的是为了屏蔽项目的配置过程让程序员吧工作的重心放到具体功能和业务逻辑的实现上。
若有需要修改webpack默认配置需求可以再项目目录中按需创建vue.config.js这个配置文件从而对项目的打包发布过程中作者自定义的配置(具体配置参考https://cli.vuejs.org/zh/config/#vue_config.js)
// vue.config.js
//在这个配置文件中自定义配置选项的对象
module.exports {
//选项
}2. 为开发环境和发布环境指定不同打包入口
默认情况下Vue项目的开发模式与发布模式公用一个打包的入口文件(即src/main.js)为了将项目的开发过程分离我们可以分为2种模式为开发环境和发布环境指定不同的入口文件。
2.1. 开发环境入口文件src/main-dev.js
2.2. 开发环境入口文件src/main-prod.js
2.3. 自定义webpack打包配置
在vue.config.js导出的配置对象中新增configureWebpack或chainWebpack节点来自定义webpack的打包配置。
configure和chainWebpack的作用相同唯一的区别就是他们修改了webpack配置的方式 ①chainWebpack通过链式编程的形式来修改默认的webpack配置 ②configureWebpack通过操作对象的形式来修改默认webpack配置
二者具体差异https://cli.vuejs.org/zh/guide/webpack.html#
2.4. 通过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)})}
} 四、资源加载优化
通过externals加载外部的CDN资源
1. 具体参考配置
config.set(externals, {vue: Vue,vue-router: VueRouter,axios: axios,lodash: _,echarts: echarts,nprogress: NProgress,vue-quill-editor: VueQuillEditor})2. 指定CDN引用
同事需要在public/index.html的文件头部添加CDN资源引用 !-- nprogress 进度条的样式表文件 --link relstylesheet hrefhttps://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css /!-- 富文本编辑器 的样式表文件 --link relstylesheet hrefhttps://cdn.bootcss.com/quill/1.3.7/quill.core.min.css /link relstylesheet hrefhttps://cdn.bootcss.com/quill/1.3.7/quill.snow.min.css /link relstylesheet hrefhttps://cdn.bootcss.com/quill/1.3.7/quill.bubble.min.css /script srchttps://cdn.bootcss.com/vue/2.6.11/vue.min.js/scriptscript srchttps://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js/scriptscript srchttps://cdn.bootcss.com/axios/0.19.2/axios.min.js/scriptscript srchttps://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js/scriptscript srchttps://cdn.bootcss.com/echarts/4.7.0/echarts.min.js/scriptscript srchttps://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js/script!-- 富文本编辑器的 js 文件 --script srchttps://cdn.bootcss.com/quill/1.3.7/quill.core.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue-quill-editor3.0.4/dist/vue-quill-editor.js/script3. 通过CDN优化ElementUI的打包
虽然在开发阶段我们启用了element ui组件的按需加载尽可能的减少打包的体积但是那些被按需加载的组件还是占用了较大的文件体积。此时我们可以将element-ui中的组件也通过CDN的形式来加载这样可以进一步减少打包后的文件体积。
3.1. 操作流程
具体操作如下 ①在main-prod.js中注释掉eleemnt-ui按需加载的代码 ②在index.html的头部区域中通过CDN来加载element-ui的js和css样式 !-- element-ui 的样式表文件 --link relstylesheet hrefhttps://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css /
!-- element-ui 的 js 文件 --script srchttps://cdn.bootcss.com/element-ui/2.13.0/index.js/script五、首页内容定制
不同的打包环境下首页内容可能会有所不同我们可以通过插件的方式进行定制。
1. 插件配置1
module.exports {chainWebpack: config {// 发布模式config.when(process.env.NODE_ENV production, config {config.entry(app).clear().add(./src/main-prod.js)// 配置插件config.plugin(html).tap(args {args[0].isProd truereturn args})})// 开发模式config.when(process.env.NODE_ENV development, config {config.entry(app).clear().add(./src/main-dev.js)// 配置插件config.plugin(html).tap(args {args[0].isProd falsereturn args})})}
}
2. 插件配置2
在public/index.html的首页中可以根据isProd的值来决定如何渲染页面结构 !-- 按需渲染的页面标题 --title% htmlWebpackPlugin.options.isProd ? : dev - %电商后台管理系统/title!-- 按需加载外部的CDN资源 --% if(htmlWebpackPlugin.options.isProd){ %!-- 通过external 加载外部的CDN资源 --% } %六、路由异步懒加载
当打包构建应用时JavaScript 包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块然后当路由被访问的时候才加载对应组件这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能轻松实现路由组件的懒加载。
1. 命令安装
npm install --save-dev babel/plugin-syntax-dynamic-import2. 图形化安装(推荐使用)
安装开发依赖 任选其一种即可
3. 配置插件
插件官网 https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/ 在babel.config.js文件中添加
{plugins: [babel/plugin-syntax-dynamic-import]
}4. 组件引入方式修改
const Foo () import(./Foo.vue)const router new VueRouter({routes: [{ path: /foo, component: Foo }]
})5. 把组件按组分块
官网案例
const Foo () import(/* webpackChunkName: group-foo */ ./Foo.vue)
const Bar () import(/* webpackChunkName: group-foo */ ./Bar.vue)
const Baz () import(/* webpackChunkName: group-foo */ ./Baz.vue)展示项目 接下一篇Vue优化策略_项目上线_02 https://gblfy.blog.csdn.net/article/details/105369051
