webpack的分享

從前端的工程化開始談

如今隨便找個前端項目，都已經不是過去的拼個頁面+搞幾個jQuery插件就能完成的了。工程複雜了就會產生許多問題，好比：如何進行高效的多人協做？如何保證項目的可維護性？如何提升項目的開發質量和開發速度？

概念：前端工程化是使用軟件工程的技術和方法來進行前端項目的開發、維護和管理

軟件工程的概念：應用計算機科學理論和技術以及工程管理原則和方法，俺預算和儘速，實現知足用戶要去的軟件產品的定義、開發和維護的工程或研究的學科

前端工程化主要包括：模塊化、組件化、規範化、自動化

模塊化
        js模塊化（CommonJs AMD CMD）模塊加載方式
        如今的es6已經在語言層面規定了模塊系統 export import
        資源模塊化（css img）
    組件化 
        組件化和模塊化的區別是是顆粒程度上面的區別
    規範化
        目錄結構
        先後端接口規範發
        分支管理（test master 我的分支）
        commit描述規範
        編碼規範
        圖標的規範
        命名規範
        按期的CodeReview
        .......
    自動化
        持續集成
        自動化構建（webpack）
        自動化部署
        自動化測試
複製代碼

構建工具的介紹

構建工具的介紹

webpack的優化

1. webpack的tree-shaking
    自帶的：treeshaking： js-shaking（只能簡單的檢測exprots， 並不能檢查是否在當前做用域中是否執行） css-shaking
    相關plugin： webpack-deep-scope-plugin
                purifycss-webpack
2.  webpack magic comments （webpack3裏面剛更新的）
3.  optimization配置 （代碼分離， 按需加載）
        runtime : webpack 運行時
        common： 公共的包
        main： 啓動頁所須要放的東西,主業務
        async-test： 異步業務
4. 開啓多核壓縮
    uglifyjs-webpack-plugin
        注意： 壓縮es5的代碼，須要轉es5， 不然報錯
        網址：
            https://www.npmjs.com/package/uglifyjs-webpack-plugin
    webpack-paraller-uglify-plugin
        支持 es5 es6代碼壓縮
        uglifyJS uglifyES
5.  監控你的面板
        speed-measure-webpack-plugin
6.  開啓一個通知面板
        webpack-notifier
        網址：
        https://www.npmjs.com/package/webpack-notifier
3.7 開啓打包進度
        progress-bar-webpack-plugin
    線上優化
        一、es6不須要編譯（babel-loader）
            大多數瀏覽器支持了， 可是某一些api仍是瀏覽器沒有更新支持
            https://cdn.polyfill.io/v2/polyfill.min.js?features%20=Map,Set
        二、前端緩存 小負載 webapp
            前端緩存的話是有不少依賴的， 例如 localstorage sessionstorage indexdb cookie
            a.js -》 a.xxx.jsf
            a.xxx.js -> 代碼 
            後臺每次計算當前包有沒有發生變化 
            webpack-manifest-plugin 生成一個manifest.json的文件
        三、真正的loadding
            首屏渲染，單獨的管理
        四、 單頁問題 多頁轉單頁
            webapp 性能好，作直出，減小請求的數量
        五、分析打包結果
            監控文件大小 bundlesize 
            webpack-analyse
            http://webpack.github.com/analyse
        六、test exclude include 很是重要 很快
        七、壓縮js css
            壓縮js：
                webpack-paraller-uglify-plugin
                happpack 針對ts-loader 
            壓縮css：
                Cssnano: https://github.com/iuap-design/blog/issues/159
                optimize-css-assets-webpack-plugins: 多核的壓縮你的css
        八、devtool eval
            https://www.webpackjs.com/configuration/devtool/
        九、cache-loader  來作loader的緩存，加快編譯的速度 增量式的
複製代碼

四、構建一個多頁mpa 落地用多頁，切換用單頁（應用的最佳方式） 前端的路由都是假的，spa中首次進入須要請求大量的js， css，咱們期待直出 next(vue) nuxt（react） nest（node）