2017年Webpack前端工程化實踐.pdf

《2017年Webpack前端工程化實踐.pdf》由會員分享，可在線閱讀，更多相關《2017年Webpack前端工程化實踐.pdf（67頁珍藏版）》請在三個皮匠報告上搜索。

1、i5tingWebpack前端工程化原理與實踐2017依賴管理 npm,bower壓縮 uglifyjs,jsmin，csso模塊系統 CommonJs,AMD,ES6 ModulesCSS預處理 PostCSS、less、sass資源處理 DataURLjs友好語言 coffee,babel，typescript模塊加載器 require.js,jspm，sea，system.js圖片壓縮 imagemin構建工具 grunt,gulp,make模板引擎 jade,handlebars，nunjucks模塊打包器 browserify,webpack前端=錢端目錄1Webpack的前世今生3

2、Q/A2前端工程化Webpack的前世今生理解演進過程依賴下載下載某個庫或插件 下載它的依賴，以及依賴的依賴 無窮盡依賴管理npm/bowerNPMNode.js內置，你值得擁有 在package.json里存儲包的描述信息和依賴 npm init:創建package.json配置文件 npm install jquery-save:安裝并保存到package.json npm install:安裝在package.json里的所有依賴腳本加載windowiframeeval$.getScript()該有模塊系統了使用標準的模塊系統來處理依賴和導出 每個文件是一個模塊 使用模塊加載器或打包器進

3、行處理AMD,CommonJS,ES6 ModulesCOMMONJSrequire(.):Loads module,returns exports require(./helpers.js):.by relative path,returns exports require(jquery):.from dependencies manager folder exports or module.exports export objectmodule exports require globalAsynchronous Module DefinitionCommonJS 中逐漸分裂出了 AMD，

4、專門用于瀏覽器的 因為瀏覽器沒有io讀寫apihttps:/ module and bind exported variables into scope.import abc from.:Bind abc to the default export.import abc from.:Bind abc to the named export abc.import xyz as abc from.:Bind abc to the named export xyz.import*as abc from.:Bind abc to a object with all exports.import.:Lo

5、ads module only for side-effects.:-|System.import(.):Loads a module async,returns a Promise to all exports import./helper.js and import jquery Resolving not specified Everyone assumes the same as CommonJs以前使用多個標簽加載 手動管理順序 手動管理加載哪些runs in the browser and loads modules when they are requested easy to

6、use less optimized for production usageruns in preparation and bundles modules into static files needs a preparation/build step more optimized for production usage開發環境產品環境module loadermodule bundlergrunt/gulprequire.js systemjsr.jsbrowserify webpackjspm所有資源都是模塊Entry-options：初始化配置Compile：開始編譯make：分析入

7、口文件 創建模塊對象 Build-module：構建模塊after-compile：完成所有模塊 emit：Compiler開始輸出生成assets，插件有最后機會after-emit：輸出完成如何工作：打包過程Webpack從配置文件里找到entry point 解析模塊系統 解決依賴 模塊依賴處理（讀取，解析，解決）合并所有使用的模塊 合并模塊系統的運行時環境 產生打包后的文件瀏覽器通過加載webpack打包后的文件 加載模塊運行時環境 加載entry point 讀取依賴 解決依賴 執行（帶有依賴的）entry point演進過程1.混亂加載 2.各種模塊系統標準，commonjs/am

8、d/es6 module 3.模塊加載器，requirejs/sea/systemjs 4.模塊打包器，webpack/r.js/jspm/browserfy A.合并入口，對外暴露的只有entry point B.提供瀏覽器運行環境（內置模塊加載器）C.優化（tree-shaking、DCE無用代碼移除等）你只管寫就好了其他的webpack來你能寫，就好了。你能寫好，就好了。你能，就好了。你，就好了。模塊1模塊2模塊n合并轉換 降級優化壓縮webpackLoadersplugins前端不只有jsTranspilercss預處理器html模板引擎打包器的演進browserify webpack

9、 1 rollup webpack 2利用es6模塊能靜態分析語法樹的特性，只將需要的代碼提取出來打包，能大大減小代碼體積commonjs規范多種模塊Code Splitting分離第三方庫:第三方庫代碼不會頻繁修改再次運行 webpack，可以發現生成了兩個 bundle。然而如果查看他們的代碼，會發現 moment 的代碼在兩個文件中都出現了！現在運行 webpack。查看結果會發現 moment 代碼只會出現在 vendor bundle 中require.ensure()webpack 在編譯時，會靜態地解析代碼中的 require.ensure()，同時將模塊添加到一個分開的 chu

10、nk 當中。這個新的 chunk 會被 webpack 通過 jsonp 來按需加載。bundle.js0.bundle.js前端工程化人生苦短，我選Node一、背景帶來的問題開發測試成本增加客戶端性能受影響工具？使業務同學 專注于研發Ykit二、構建優化解決思路FEkit 工作原理 Ykit 工作原理構建優化設計三、宏觀優化 提升總體構建速度Webpack 本地服務Ykit 本地服務Ykit 會根據請求的資源進行入口過濾，僅打包頁面所請求的資源Webpack 本地服務Ykit 本地服務Demo 地址：https:/ 防止 Webpack 內存溢出崩潰壓縮優化Demo 地址：https:/ 移

11、動端項目優化實踐去哪兒移動 Hybrid 項目特性分析開發端：工程依賴較多，構建速度慢 用戶端：對性能要求高，需要頁面渲染速度快開發體驗優化-HappypackWebpack 的構建過程是單進程的，利用 HappyPack 可對依賴進行多進程處理，更有效地利用系統資源。開發體驗優化-HappypackHappyPack 可對編譯過的模塊進行緩存，并根據文件是否被修改過決定是否使用該模塊的緩存。開發體驗優化-DllPlugin第三方依賴模塊可以通過 DllPlugin 打包為單獨的 lib.js，每次構建時候這部分不會重新構建。用戶端優化-資源龐大的情況下，如何使體驗更好只加載當前頁面需要的資源

12、 按需加載 盡可能將公共資源緩存 長效緩存用戶端優化-通過按需加載減小首屏渲染速度首屏加載異步加載與路由結合，當跳轉到后續頁面時才去加載對應模塊用戶端優化-通過模塊劃分實現長效緩存在配置文件中添加自定義模塊到 vendor五、Ykit 現狀和未來在去哪兒的使用現狀+120+項目未來展望 技術解決方案+應用場景+你會的越多，解決越容易bigpipe代理工具理解瀏覽器渲染和性能優化mockapi proxy架構clinode-java更多樂趣，自己發現吧1）初衷，server端，不想成了前端開發的基礎設施2）命令行輔助工具，甚至可以是運維3）移動端：cordova，pc端：nw.js和electron4）組件化，構建，代理5）架構，前后端分離、api proxy6）性能優化、反爬蟲與爬蟲7)全棧最便捷之路Q&Ahttps:/cnodejs.org/user/i5ting/狼叔說：少抱怨，多思考，未來更美好