vue 文件多了， webpack 热加载很慢？ - V2EX
- -点我最近刚好在看 webpack，如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章，不要脸的放一下博客. 如果时间不够只是想解决这个问题，那么我尝试正儿八经回答一下. 1.把 webpack 升级到 4.0. 3.使用 DLLplugin,happypack 等构建加速插件. 4.检查 loader/eslint 是否配置错误 /不合理.
vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案_个人文章 - SegmentFault 思否
标签：
| 发表时间：2020-10-09 16:35 | 作者：
出处：https://segmentfault.com
vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案
最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化
1,关闭打包时生成的map文件
在 config/index.js文件中讲 productionSourceMap设置为 false,再次打包便没有了map文件
2,vue-router路由懒加载
懒加载的实现方式有很多种,这里简单说三种实现方法
- vue异步组件
- import()
- webpack的require.ensure()
vue 异步组件
vue异步组件技术也就是异步加载,vue-router配置路由,使用veu的异步加载技术,可以实现按需加载,但是这种情况下一个组件生产一个js文件
/* vue异步组件技术 */
{
path: '/index',
name: 'index',
component: resolve => require(['@/views/index'],resolve)
} 使用import
组件懒加载方案二
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
// router
{
path: '/about',
component: About
}, {
path: '/index',
component: Index
} webpack的require.ensure()
使用webpack的require.ensure()技术,也可以实现按需加载.这种情况下,多个路由指定相同的chunkName会合并打包成一个js文件
/* 组件懒加载方案三: webpack提供的require.ensure() */
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
} CDN引用
CDN可以减少代码体积加快请求速度,使用CDN主要解决两个问题,打包时间太长,打包后代码体积太大,请求很慢,还有就是回避服务器带宽问题
具体步骤
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script> 如果提示Element未定义,是因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式.
然后,修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见 https://webpack.docschina.org...，其中键是项目中引用的，值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENT
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
} 然后删除原先的import,如果不删除原先的import，项目还是会从node_modules中引入资源。
也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。还是删了好。
参考文章列表:感谢大神们
vue页面首次加载缓慢原因及解决方案
vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()
相关 [vue 加载 加载] 推荐：
vue-router+vuex实现加载动态路由和菜单-爱咖啡-51CTO博客
- -动态路由加载和动态菜单渲染的应用在后端权限控制中十分常见，后端只要加载权限路由进行渲染返回到浏览器就可以. 在前后端分离中，权限控制动态路由和动态菜单也是一个非常常见的问题. 其实我们最最理想的效果是什么呢. 我们访问一个应用，在登录之前有哪些路由是一定要加载的呢. 你看我总结如下，你看下是不是这些：.
vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案_个人文章 - SegmentFault 思否
- -vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案. 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化. 1,关闭打包时生成的map文件. config/index.js文件中讲. productionSourceMap设置为.
提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园
- -本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了. 首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中.
动态加载HQL
- senyo - BlogJava-首页技术区Java代码如下：(ReloadableDynamicHibernate.java). 135 private Map qlMap; //查询的映射. 这样就实现了每次修改SQL or HQL语句后不用重启服务器，立刻看到结果，加快了开发速度.
java动态加载
- - Java - 编程语言 - ITeye博客第一部分：Java虚拟机启动时，关于类加载方面的一些动作. 当使用java ProgramName.class运行程序时，Java找到JRE，接着找到jvm.dll，把该动态库载入内存，这就是JVM. 然后加载其它动态库， 并激活JVM. JVM激活之后会进行一些初始化工作，之后生成BootstrapLoader，该Class Loader是由C++写的.
spring 加载顺序
- - 企业架构 - ITeye博客web.xml文件加载顺序. 1 、启动一个 WEB 项目的时候， WEB 容器会去读取它的配置文件 web.xml ，读取 和 两个结点. 2 、紧急着，容创建一个 ServletContext （ servlet 上下文），这个 web 项目的所有部分都将共享这个上下文.
ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
- -This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.
“按需加载”的应用
- - TID-财付通设计中心按需加载是前端性能优化中的一项重要措施，按需加载是如何定义的呢. 顾名思义，指的是当用户触发了动作时才加载对应的功能. 触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等. 加载的文件，可以是JS、图片、CSS、HTML等. 后面将会详细介绍“按需”的理解.
hibernate的延迟加载
- - ITeye博客 代码的逻辑是:查询出id为1的major, 并输出其名字. 很明显, 代码的逻辑是对的. 可一运行就会报错:. 翻译过来就是: 延迟加载异常:不能初始化代理 --- session不存在. 出现这个报错信息的原因就在于hibernate的延迟加载机制. 所谓的延迟加载就是程序在使用load, iterator方法执行查询及关联查询时, 并不会马上发送并执行sql语句, 而是在调用(被查询)对象属性的getter方法时才去执行查询.