搭建框架
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 斷言