搭建框架
webpack 基本介绍
Webpack 的特点
Webpack 构建流程
核心概念
如何使用 Webpack
搭建项目模板框架
项目初始化
安装 Webpack
安装 Vue
安装一些依赖
npm install vue-router
npm install -D vue-loader vue-template-compiler
npm install -D sass-loader node-sass // css预处理器
npm install -D postcss-loader postcss-preset-env //使用 PostCSS
npm install --save-dev html-webpack-plugin //使用 HTML 模板
npm install --save-dev css-loader style-loader //处理 CSS 的对应 loader
npm install --save-dev url-loader //处理资源路径
npm install --save-dev @babel/core @babel/preset-env babel-loader
npm install --save @babel/polyfill
PostCSS babel 配置
本地开发环境
自动执行构建
刷新浏览器
本地Mock环境
json
mock
第三方工具： esay-mock 和 RAP
自己写接口
代码检查
ESLint
stylelint
webpack
一般配置： 区分不同环境
webpack-merge
webpack.config.base.js
webpack.config.dev.js
webpack.config.prod.js
官方文档：webpack插件
优化思路
升级版本
在尽可能少的模块上应Loader
尽可能使用官网推荐的插件
resolve
resolve: {
extensions: [’.js’,’.jsx’],
mainFiles: [‘index’,‘xxx’],
alias:{
//设置别名
}
}
缓存
Webpack 的 cache 配置
// 启用缓存
cache: true,
npm run start 修改app.vue中的背景图片 隐藏和显示两次测试
模式 nocache cache
冷启动 4015ms // 3967ms 3670ms // 3763ms
热替换 284ms //304ms 235ms// 262ms
HardSourceWebpackPlugin
npm install --save-dev hard-source-webpack-plugin
//配置在插件中
plugins: [
// …省略其他插件
new HardSourceWebpackPlugin()
]
不能提升第一次构建的速度，但对于第二次构建能提升99%的构建速度.
冷启动的速度提示 热替换速度降低
使用cach情况下
模式 第一次 第二次 提升
冷启动 4015ms //5036ms 1306ms //1375ms 68%
热替换 282ms // 286ms 2344ms // 444ms -38%
其他 loader 也提供了缓存相关的配置，比如 babel-loader 的 options 选项中的 cacheDirectory 来启用缓存。
多线程
代表性的工具是 HappyPack 和 Webpack 的 thread-loader
HappyPack 需要同时配置 plugin 和 loader
thread-loader 只需要在 loader 中进行配置就行 （官网维护）
npm install --save-dev thread-loader
官网
模式 第一次 第二次
冷启动 4980ms 4183ms
热替换 444ms 286ms
预先编译
Webpack 已经提供了解决方案，需要通过 2 个内置的插件接入分别是：
DllPlugin 插件：用于打包出单独的 dll（动态链接库）文件。
DllReferencePlugin 插件：用于在配置文件中去引入 DllPlugin 插件打包好的 dll 文件
打包分析
npm i -D webpack-bundle-analyzer
plugins: [
new webpack.IgnorePlugin(/^./locale
/)
]
https://blog.checklyhq.com/how-we-got-a-100-lighthouse-performance-score-for-our-vue-js-app/
mode
devtoolimage
其他
tree shaking
code-splitting tree shaking 用于描述移除 JavaScript 上下文中的未引用代码(dead-code)
mode: ‘production’,
devtool: ‘cheap-module-source-map’,
mode: ‘development’,
devetool: ‘cheap-module-eval-source-map’
optimizetion:{
usedExports: true,
}
package.json
“slideEffects”: false,
//“slideEffects”: [], 对于不想文件进行 tree shaking 可以写在数组中进行配置
单元测试
Vue Test Utils
前端单元测试框架有多种，比如开箱即用的 Jasmine，灵活成熟的 Mocha，简约高性能的 AVA。
Mocha 来编写测试用例、测试框架。由于 Mocha 本身不包括断言，使用 Chai 作为断言库。还需要一款测试执行过程管理工具（Test Runner）来自动启动浏览器运行测试并生成测试报告，选择的工具是 Karma。
npm install --save-dev karma mocha karma-mocha karma-chrome-launcher karma-webpack karma-sourcemap-loader karma-spec-reporter chai
Karma 测试执行过程管理工具，简化开发者的配置，可以启动一个或多个浏览器进行测试并生成测试报告。
Mocha 测试框架，用来编写我们的测试用例。
karma-mocha 由于我们使用 Mocha 作为测试框架，需要安装 Mocha 在 Karma 中的适配器。
karma-chrome-launcher 由于我们使用 Chrome 作为测试运行的浏览器，需要安装对应的插件。
karma-sourcemap-loader 该工具用来加载对应 js 文件的 sourcemap。
karma-spec-reporter 使用 SPEC 作为测试报告输出工具。
karma-webpack 使用 Karma 运行之前需要预先使用 Webpack 对文件进行编译
Chai 测试用例的断言库。
e2e测试
e2e 测试是站在用户的角度上，通过编写测试用例模拟用户的操作。例如自动打开浏览器，测试 dom 元素是否正常渲染，页面是否正常跳转，Ajax 请求是否符合预期。
Nightwatch 和 cypress 是 Vue 推荐的测试框架
Nightwatch官网
其他
BDD 行为驱动开发（英语：Behavior-driven development，缩写BDD）是一种敏捷软件开发的技术，它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。
TDD是测试驱动开发（Test-Driven Development）的英文简称，是敏捷开发中的一项核心实践和技术，也是一种设计方法论。
Assert 断言
