(1). 目的:
1. 让包不需要一次把所有的页面的加载进来,只加载当前页面的路由组件即可.
(2). 3种引入方式:
export default new Router({
routes: [
{
path: '/',
name: "index",
// 1. 普通引用
component: index
// 2. 路由懒加载
component: resolve => require(['@/views/index.vue'], resolve)
// 3. 路由懒加载,并且命名chunk名字,结合webpack的import使用
component: () => import(/* webpackChunkName: 'index' */ '@/views/index.vue')
}
]
})
(3). 移除prefetch、Preload:
①. prefetch、Preload的作用:
a. 当首屏加载时,会一次性下载完所有的路由文件,导致首屏请求内容很多,首屏加载变慢.
b. 当访问路由时再去加载该模块,把静态引入方式改为动态引入方式.
②. 在vue cli3中,需要手动移除这两个.
③. 举例:
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
}
}
scss文件引入
我们通常会把scss文件抽离出来,一些共用样式,主题等,然后会在每个需要的组件中引入会显得繁琐,我们可以借助scss-loader进行预处理
例如我们有 resetTable.scss 文件,可以在vue.config.js中引入
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
plugins: [
//gzip压缩
new CompressionPlugin({
test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名
threshold: 10240, //对超过10k的数据压缩
deleteOriginalAssets: false //不删除源文件
})
],
performance: {
hints: false
}
};
}
},
// scss设置
css: {
loaderOptions: {
sass: {
//我是放在 assets/commcss 目录下
data: '@import "@assets/commcss/resetTable.scss";'
}
},
},
}
使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件
两个插件都不支持es6压缩,所以使用此插件前需要用工具(如babel-loader)转换es6代码
问题描述:项目中使用iview时,导致使用UglifyJsPlugin压缩报错
因为iview某插件中包含es6语法。然而两个插件都不支持es6压缩
解决方法如下:
修改webpack配置文件,使用babel-loader转换一下iview插件中的es6语法
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
...
module: {
loaders: [
{
test: /iview.src.*?js$/, loader: 'babel' },
{
test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
],
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',
// resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')解决iview打包时UglifyJs报错
include: [resolve('src'), resolve('test'), resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')]
}
...
]
}
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
new UglifyJsPlugin({
// 使用外部引入的新版本的js压缩工具
parallel: true,
uglifyOptions: {
ie8: false, // 启用IE8支持
ecma: 6, // 支持的ECMAScript的版本(5,6,7或8)。影响parse,compress&& output选项
warnings: false, // 显示警告
mangle: true, // debug false
output: {
comments: false,
beautify: false, // debug true
},
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句
// 还可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
}),
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// },
// sourceMap: true
// }),
```
文章浏览阅读122次。还是A+BTime Limit: 2000/1000 MS (Java/Others)Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 24568Accepted Submission(s): 11729Problem Description读入两个小于10000的正整数A和B,计算A+B。...
文章浏览阅读419次。HEADERS:在BASIC的基础上,额外记录了请求和响应的头信息。FULL:记录所有请求和响应的明细,包括头信息、请求体、元数据。BASIC:仅记录请求的方法,URL以及响应状态码和执行时间。NONE:不记录任何日志信息,这是默认值。配置Feign日志有两种方式;方式二:java代码实现。注解中声明则代表某服务。方式一:配置文件方式。_feign 日志设置
文章浏览阅读155次。将容器管理的持久性 Bean 用于面向服务的体系结构本文将介绍如何使用 IBM WebSphere Process Server 对容器管理的持久性 (CMP) Bean的连接和持久性逻辑加以控制,使其可以存储在非关系数据库..._javax.ejb.objectnotfoundexception: no such entity!
文章浏览阅读1.5k次。基础java练习题一、递归实现跳台阶从第一级跳到第n级,有多少种跳法一次可跳一级,也可跳两级。还能跳三级import java.math.BigDecimal;import java.util.Scanner;public class Main{ public static void main(String[]args){ Scanner reader=new Scanner(System.in); while(reader.hasNext()){ _java 递归例题
文章浏览阅读1.5k次,点赞6次,收藏6次。目录1.串应用- 计算一个串的最长的真前后缀题目描述输入输出样例输入样例输出题解2.字符串替换(string)题目描述输入输出样例输入样例输出题解3.可重叠子串 (Ver. I)题目描述输入输出样例输入样例输出题解4.字符串操作(string)题目描述输入输出样例输入样例输出题解1.串应用- 计算一个串的最长的真前后缀题目描述给定一个串,如ABCDAB,则ABCDAB的真前缀有:{ A, AB,ABC, ABCD, ABCDA }ABCDAB的真后缀有:{ B, AB,DAB, CDAB, BCDAB_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。
文章浏览阅读68次。西安交通大学/算法设计与问题求解/树与二叉树/MOOC_算法设计与问题求解西安交通大学
文章浏览阅读1.6k次。问题:在Vue项目中出现如下错误提示:[Vue warn]: Computed property "totalPrice" was assigned to but it has no setter. (found in <Anonymous>)代码:<input v-model="totalPrice"/>原因:v-model命令,因Vue 的双向数据绑定原理 , 会自动操作 totalPrice, 对其进行set 操作而 totalPrice 作为计..._computed property "totalprice" was assigned to but it has no setter.
文章浏览阅读60次。十分暴力而简洁的解决方式:读取P和T的位置并自动生成唯一正确答案,将题给测点与之对比,不一样就给我爬!_basic 1003 case 1
文章浏览阅读422次。原标题:详解将Web项目War包部署到Tomcat服务器基本步骤详解将Web项目War包部署到Tomcat服务器基本步骤1 War包War包一般是在进行Web开发时,通常是一个网站Project下的所有源码的集合,里面包含前台HTML/CSS/JS的代码,也包含Java的代码。当开发人员在自己的开发机器上调试所有代码并通过后,为了交给测试人员测试和未来进行产品发布,都需要将开发人员的源码打包成Wa..._/opt/bosssoft/war/medical-web.war/web-inf/web.xml of module medical-web.war.
文章浏览阅读3k次,点赞3次,收藏13次。# -*- coding: utf-8 -*-# 简述:这里有四个数字,分别是:1、2、3、4#提问:能组成多少个互不相同且无重复数字的三位数?各是多少?def f(n):list=[]count=0for i in range(1,n+1):for j in range(1, n+1):for k in range(1, n+1):if i!=j and j!=k and i!=k:list.a..._python求从0到9任意组合成三位数数字不能重复并输出
文章浏览阅读1k次,点赞3次,收藏2次。<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column>然后就在vue的methods中写方法就OK了methods: { sex(row,index){ if(row.studentSex == 1){ return '男'; }else{ return '女'; }..._elementui table 性别
文章浏览阅读1.1k次。java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下