使用babel和webpack优化项目

Posted 2021-03-30 前端作用域

前言

组件化、模块化、自动化、工程化是现在考核一前端项目是否为一个优秀项目的标准之一，从而应运而生了一些列前端模块化、工程化的工具库。babel和webpack就是其中的优秀代表，那你了解他们么？你知道如何通过babel和webpack来优化前端项目么？

正文

webpack

webpack是一款前端构建工具，他的主要作用就是将各个具有依赖的模块打包整合在一起生成静态资源。就像官网展示的图片：

module chunk bundle的区别

• module: 各个源码文件，webpack中一切皆模块
• chunk: 多个模块拼接合成的文件，使用entry，import()，splitChunk可以生成chunk
• bundle: 最终输出的文件称为bundle

loader和plugin的区别

• loader: 模块转换器。less=>css
• plugin: 扩展插件

webpack性能优化

基本分为两个方面：

• 优化打包构建速度
• 优化产出代码

优化打包构建速度

优化babel-loader

• 启用缓存 use:['babel-loader?cacheDirectory]
• 合理使用include和exclude

IgnorePlugin: 忽略本地化内容

new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去

// index.js 在文件中需要手动引入当前包内自己所需要的部分
import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

noParse: 打包时不去解析相关模块中是否还依赖其他包,而这些三方库里面没有其他依赖

module:{
  noParse:/jquery|lodash/,//不去解析jquery、lodash中的依赖库
}

happyPack: 开启多进程打包，提高构建速度。

  // loader
{
  text:/\.js$/,
  use:['happypack/loader?id=babel'],
}
// plugins
new HappyPack({
    id:'babel',
    loaders:[{
      loader: 'babel-loader',
      options:{
        cacheDirectory: true,
      }
    }]
})

parallelUglifyPlugin

• webpack内置了一款Uglify工具压缩js，但是不能开启多进程
• 项目比较大。构建速度缓慢才需要使用多进程，项目简单开启多进程开销太大，可能拖慢打包进程

new ParallelUglifyPlugin({
  uglifyJS:{
    output: {
      beautify: false,  // 紧凑输出
      comments:false, // 删除注释
    },
    compress:{
      drop_console: true,
      collapse_vars: true,  // 内嵌定义了但是只用到一次的变量
      reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
    }
  }
}),

自动刷新：watch: true

热更新: HotModuleReplacementPlugin

对于js文件需要手动配置实现热更新。css更改自动实现热更新。

DllPlugin: 动态链接库

• 首先使用webpack.DllPlugin打包出dll.js文件和mainfest.json

entry:{
  vendors:['lodash'],
  react:['react','react-dom'],
},
output:{
  filename:'[name].dll.js',
  path: path.resolve(__dirname,'../dll'),
  library: '[name]',
},
plugins: [
  new webpack.DllPlugin({
    name: '[name]',
    path: path.resolve(__dirname,'../dll/[name].manifest.json')
  })
]

• 接着在npm run dev 时使用webpack.DllReferencePlugin关联文件、使用AddAssethtmlWebpackPlugin在html添加对dll.js文件的引用

const files = fs.readdirSync(path.resolve(__dirname,'../dll'))
files.forEach(file => {
  if(/.*\.dll.js/.test(file)){
    plugins.push(
      new AddAssetHtmlWebpackPlugin({
        filepath: path.resolve(__dirname, '../dll', file)
      }),
    )
  }
  if(/.*\.manifest.json/.test(file)){
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll', file)
    })
  }
})

• 不推荐使用在生产环境中

优化产出代码

代码体积更小

• url-loader 产出base64格式的图片
• Tree-Shaking: mode: 'production'
• 只有使用ES Module引用才能实现Tree-Shaking
• Scope Hosting：代码体积更小，创建函数作用域更少，代码可读性更高

  // 针对npm中第三方模块优先采用jsnext:main中指向的ES6 模块化语法的文件
  resolve: ['jsnext:main', 'browser', 'main'],
  
  plugin:{
    // 开启Scope Hosting
    new webpack.optimize.ModuleConcatenationPlugin()
  }
  

合理分包，不重复加载

• 打包出的bundle加Hash，未改变的文件使其能命中缓存
• 提取公共代码：

optimizatoin:{
  splitChunks:{
    chunks: 'all',
    minSize: 20000,
    // minRemainingSize: 0,
    maxSize: 0,
    minChunks: 1,       // 代码被引入了多少次才会代码分隔
    maxAsyncRequests: 6,      // 最多同时 请求数
    maxInitialRequests: 4,      // 最多入口分隔的 请求数
    automaticNameDelimiter: '~',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
}

速度更快，内存使用少

• 使用懒加载 import()
• 使用CDN加速: publicPath:'http://cnd.com'

babel

babel是一款javascript的编译器。他负责

• 检查语法是否符合es5语法规范。不符合就转换
• 不处理模块化（webpack处理）

presets

presets是babel中的预设组件。相当于一堆plugin的集合。常见的有

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

babel-polyfill

• core-js: 将ES6、ES7等代码转换整ES5代码的工具库
• regenerator: 将 generator函数转换为ES5代码的工具库

babel-polyfill就是两者的集合。babel在7.4版本放弃了babel-polyfill推荐用户直接使用core-js或regenerator

如何实现按需引用，在.babelrc文件下

{
  "presets":[
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 按需引用
        "corejs": 3 //core-js 版本
      }
    ]
  ]
}

babel-runtime

babel-polyfill会造成全局污染，runtime就是为了防止全局污染。写第三方库时可以使用。

.babelrc

{
  "plugins":[
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
      }
    ]
  ]
}

前端为何要进行打包和构建？

• 体积更小（Tree-Shaking、压缩、合并），加载更快
• 编译高级语言和语法（TS、ES6+、模块化、sass、less）
• 兼容性和语法检查（polyfill、postcss、eslint）
• 统一高校的开发环境
• 统一的构建流程和产出标准
• 集成公司构建规范（提测、上线）