webpack的分享-CSDN博客

从前端的工程化开始谈

现在随便找个前端项目，都已经不是过去的拼个页面+搞几个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
    线上优化
        1、es6不需要编译（babel-loader）
            大多数浏览器支持了， 但是某一些api还是浏览器没有更新支持
            https://cdn.polyfill.io/v2/polyfill.min.js?features%20=Map,Set
        2、前端缓存 小负载 webapp
            前端缓存的话是有很多依赖的， 例如 localstorage sessionstorage indexdb cookie
            a.js -》 a.xxx.jsf
            a.xxx.js -> 代码 
            后台每次计算当前包有没有发生变化 
            webpack-manifest-plugin 生成一个manifest.json的文件
        3、真正的loadding
            首屏渲染，单独的管理
        4、 单页问题 多页转单页
            webapp 性能好，做直出，减少请求的数量
        5、分析打包结果
            监控文件大小 bundlesize 
            webpack-analyse
            http://webpack.github.com/analyse
        6、test exclude include 非常重要 很快
        7、压缩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
        8、devtool eval
            https://www.webpackjs.com/configuration/devtool/
        9、cache-loader  来做loader的缓存，加快编译的速度 增量式的
复制代码

4、构建一个多页mpa 落地用多页，切换用单页（应用的最佳方式）前端的路由都是假的，spa中首次进入需要请求大量的js， css，我们期待直出 next(vue) nuxt（react） nest（node）