<blockquote>
<p>工程化：使用一些列具有模块化、代码分割、代码转译、对非JavaScript文件支持良好的工具，构建有效的、高质量的、高可维护性、实用的中大型前端应用</p>
</blockquote>
<p>这些工具所要支持的特性主要包括以下几个维度</p>

      <h2>
        <span class="prefix"></span>
        <span class="content">模块化</span>
        <span class="suffix"></span>
      </h2>
    <p>即对ESM、CommonJS等主流模块化机制的支持。随着前端应用的日渐庞大，将应用或按业务划分或按功能划分为多个模块已是大势所趋，因此良好的模块化支持将有助于开发出健壮、可维护性高的应用</p>

      <h2>
        <span class="prefix"></span>
        <span class="content">代码分割</span>
        <span class="suffix"></span>
      </h2>
    <p>在构建时能够将静态资源拆分，因此在页面加载时，可以实现合理的按需加载策略</p>
<p>包括公共文件提取、动态导入等</p>

      <h2>
        <span class="prefix"></span>
        <span class="content">处理非JavaScript资源</span>
        <span class="suffix"></span>
      </h2>
    <p>在开发前端应用时，有相当一部分代码/资源为非JavaScript，其中包括CSS、图片等，如何处理这些资源也变得至关重要</p>

      <h2>
        <span class="prefix"></span>
        <span class="content">代码转译</span>
        <span class="suffix"></span>
      </h2>
    <p>处理代码兼容</p>

      <h2>
        <span class="prefix"></span>
        <span class="content">Tree Shaking</span>
        <span class="suffix"></span>
      </h2>
    <p>剔除无用代码</p>


> 工程化：使用一些列具有模块化、代码分割、代码转译、对非JavaScript文件支持良好的工具，构建有效的、高质量的、高可维护性、实用的中大型前端应用

这些工具所要支持的特性主要包括以下几个维度

## 模块化

即对ESM、CommonJS等主流模块化机制的支持。随着前端应用的日渐庞大，将应用或按业务划分或按功能划分为多个模块已是大势所趋，因此良好的模块化支持将有助于开发出健壮、可维护性

前端架构&软实力-工程化

模块化

代码分割

处理非JavaScript资源

代码转译

Tree Shaking