前端工程化实践

Song559
108 阅读2分钟

前端工程化实践

前端工程化：将代码转换成浏览器可执行文件的一个过程，在这个过程中，可以进行分包、压缩和优化。

image.png  

目标：将多个入口文件，打包输入到指定的输出文件中：

  • 开发环境：内存
  • 生成环境：dist/prod

基础配置

  • Laoder

    • 解析vue: vue-loader

    • 解析ES语法：babel-loader

    • 图片资源：url-loader, file-loader

    •  less解析：style-loader(将css以style的形式注入header标签内), css-loader(解析css中@import 和 url()), less-loader(解析less语法，转换成css)

  • plugins

    • .vue文件处理： VueLoaderPlugin

    •  根据html模板，注入js,生成html文件: HtmlWebpackPlugin

    • new webpack.DefinePlugin() 全局常量定义

    •  new webpack.ProvidePlugin() 将第三方库暴露在 window 上下文中

  • optimization

    • 代码分割，分割规则：

      • 第三方库单独放分割到 vendor 模块中；
      • 被引用超过两次的，定义为公共模块，分割到 common 模块中；

 

生产环境

  • loader

    • 提取 css 公共部分：MiniCssExtractPlugin
    • 开启多线程打包：threadLoader（使用threadLoader 替代 happypack）

  • plugins

    • 清空打包目录：CleanWebpackPlugin
    • 优化并压缩 css 资源：CssMinimizerPlugin
    • 网络安全：html-webpack-inject-attributes-plugin 浏览器在请求资源时，不发送用户的身份凭证

  • optimization

    • 开启构建缓存，同时利用多核CPU进行加速压缩：TerserWebpackPlugin  

开发环境

  • plugins
    • 监听文件变化，将文件解析编译：webpack-dev-middleware
    • 通知浏览器进行热更新：webpack-hot-middleware

热更新过程

image.png  

为什么使用 thread-loader 替代 HappyPack ?

  • HappyPack
    • HappyPack 已经停止维护，最新发布的版本还停留在6年前；
    • 属于 webpack 更早的产物;

image.png

  • thread-loader
    • 官方支持
    • 配置简单
    • 在工作池中运行的loader是有限制的：
      • Loaders 不能产生新的文件;
      • Loaders 不能使用自定义的loader API（也就是说，通过插件）;
      • Loaders 无法获取 webpack 的选项设置;
      • 每个worker都是一个单独的node.js进程，其开销约为600ms。同时跨进程的数据交换也会被限制。 [thread-loader]中建议：请仅在耗时的 loader 上使用。

 

 

哲玄前端实践课

avatar
文章
阅读
粉丝