theme: condensed-night-purple
highlight: a11y-dark
这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
打包文件解析
从服务器请求静态资源，从静态资源服务器请求第一次资源的时候，可能会花费很长时间，因为js文件很大，可能页面会出现很长时间空白
vue在配置对js文件和css文件进行分包 将项目中的所有css相关全部分离到css文件，在index.html里进行导入 打包的js文件里有三个js文件： app.js: 当前应用程序开发的所有代码(业务代码) manifest.js: 为打包的代码做底层支撑 vendor.js: 提供商 第三方 项目里引用的第三方，例如vue、vue-router、axios、bs
在build/webpack.prod.cof.js里有一个 new UglifyJsPlugin({ })等等，关掉,取消丑化 manifest.js：一个立即执行函数(匿名闭包)，参数是js文件(模块)组成的数组 匿名闭包理由一个关键的函数：__webpack_require__ 在某处调用了该函数 result = __webpack_require__(__webpack_require__.s = executeModules[i]);
之所以之前的模块能够产生依赖关系，并且能够互相之间引用的使用，是因为底层有这样的函数作为支撑
路由懒加载
认识路由的懒加载
官方给出了解释: - 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。 - 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
官方在说什么呢? 首先, 我们知道路由中通常会定义很多不同的页面. 这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中. 但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大. 如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
如何避免这种情况呢? 使用路由懒加载就可以了. 路由懒加载做了什么? 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块. 只有在这个路由被访问到的时候, 才加载对应的组件
.map文件作用： 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 很容易理解吧，原来的引用是立即执行函数，懒加载变成了使用时再执行函数 有map文件的把config下的index里productionSourceMap改为false，那个map文件是给你追踪错误用的，是源码 map是用来输出错误信息 不想要的修改config/index.js的productionSourceMap: false, 把返回的东西变成了一个方法，执行方法的时候才返回，所以可以用于懒加载。
懒加载的方式
方式一: 结合Vue的异步组件和Webpack的代码分析. const Home = resolve => { require.ensure([ '../components/Home.vue']，() =>{ resolve( require( '../components/Home.vue' )) })};
方式二: AMD写法 const About = resolve => require([ '../components/About.vue'],resolve);
方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割. const Home = () => import("../components/Home")
嵌套路由
嵌套路由是一个很常见的功能 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容. 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.
实现嵌套路由有两个步骤: 创建对应的子组件, 并且在路由映射中配置对应的子路由. 在组件内部使用 标签.
router-link 不知道你在哪里定义的，必须把完整路径写上 to="/home/news"
嵌套路由也可以配置默认的路径, 配置方式如下: js { path : '/home', component : Home, children : [ { path : '', redirect : 'news' }, { path : 'news', // 不用写/，会自动补上 component : HomeNews }, { path : 'messege', component : HomeMessege } ] },