WithRollup：优化你的代码打包技术

一、WithRollup是什么

WithRollup是一个基于Rollup.js的工具，它专门用于打包JavaScript代码。它主要的功能是将多个源文件合并成一个文件，并在此过程中剔除用不上的代码，从而尽可能地减小输出文件的大小。WithRollup拥有许多强大的功能，例如代码分割、Tree-shake、自定义插件等，这些功能使得它成为一个可以灵活定制的打包工具。

二、WithRollup的优点

Improve performance涉及到有关代码打包的话题时，没有谁能够拒绝更小的代码大小以及更快的加载速度。WithRollup在这方面做得非常好。它会将用不上的代码从打包文件中暂时或完全地删除。这种方式能够使得我们的代码更快地下载和执行，进而提高网站的性能。

Optimize package大小

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: 'src/main.js',
    plugins: [
      nodeResolve({ jsnext: true, main: true, browser: true }),
      commonjs()
    ],
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    }
}

Customizable可定制

import { terser } from "rollup-plugin-terser";
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';
import replace from 'rollup-plugin-replace';

const isProduction = process.env.NODE_ENV === 'production';

export default {
  input: 'src/main.js',
  output: {
    name: 'myBundle',
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    postcss({
      plugins: [],
      extract: true, //输出提取的CSS文件
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    isProduction && terser(),
  ]
}

三、WithRollup的代码优化

Code splitting代码分块

WithRollup允许我们在打包过程中将代码拆分成不同的块。这种做法非常有效，因为这样可以根据需要动态地加载代码块，从而极大地提高加载速度。WithRollup可以通过”codeSplitting”和”dynamicImport”等方式来进行代码分块。

{
  input: ['src/entry.js', 'src/entry2.js'],
  output: {
    dir: 'output',
    format: 'esm'
  },
  plugins: [
    nodeResolve({
      descriptionFiles: ['package.json'],
      browser: true
    }),
    commonjs({
      include: 'node_modules/**'
    })
  ],
  experimentalCodeSplitting: true
}

Tree-shake精简码

WithRollup利用静态引用分析工具（例如：esprima）去除在应用中并未使用的代码。这是Tree-shake需要做的。通过这一做法，WithRollup能够让我们的代码变得更小。

{
  input: 'src/main.js',
  output: {
    file: 'dist/main.min.js',
    format: 'es'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    terser({
      compress: {
        ecma: 6,
        warnings: false
      },
      output: {
        ecma: 6,
        beautify: false
      }
    })
  ]
}

四、WithRollup的进阶应用

多项目打包

当你需要一次性打包多个项目时，WithRollup能够帮助你更高效地完成这一任务。它允许你将多个项目进行组合打包，让你可以同时处理多个项目的相关依赖关系，从而大幅度提高生产效率。

import path from 'path';
import rollupPluginNodeResolve from "rollup-plugin-node-resolve";

const baseDir = path.join(__dirname, 'src');

export default [

{
  input: path.join(baseDir, 'foo.js'),
  output: [
    {
      format: 'cjs',
      file: path.join(__dirname, 'build', 'foo-common.js')
    },
    {
      format: 'es',
      file: path.join(__dirname, 'build', 'foo-esm.js')
    },
    {
      format: 'umd',
      file: path.join(__dirname, 'build', 'foo.js')
    }
  ],
  plugins: [
    rollupPluginNodeResolve({
      jsnext: true,
      main: true
    })
  ]
},

{
  input: path.join(baseDir, 'bar.js'),
  output: [
    {
      format: 'cjs',
      file: path.join(__dirname, 'build', 'bar-common.js')
    },
    {
      format: 'es',
      file: path.join(__dirname, 'build', 'bar-esm.js')
    },
    {
      format: 'umd',
      file: path.join(__dirname, 'build', 'bar.js')
    }
  ],
  plugins: [
    rollupPluginNodeResolve({
        jsnext: true,
        main: true
    })
  ]
}
];

自定义特定目录打包

WithRollup允许你自定义特定的目录来进行打包工作。这非常有用，因为它让你可以根据自己的需要进行灵活操作。例如，你可以指定某一个文件夹及其下级目录来执行打包操作，完成更高级的定制。

import serve from 'rollup-plugin-serve';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'umd',
    name: 'MyApp'
  },
  plugins: [
    resolve(),
    serve({
      contentBase: 'public',
      port: 3000
    })
  ]
};

五、WithRollup的使用建议

WithRollup是一个非常灵活的工具，可以根据不同的需要进行自定义打包操作。在使用WithRollup时，我们需要结合实际情况进行调整，从而得到最佳的打包效果。以下是一些使用WithRollup的建议：

1、认真研究打包目标。在使用WithRollup之前，我们需要对要打包的输出目标进行了解。这样，我们可以更好地使用WithRollup的特性，提高代码的效率。

2、选择正确的插件。WithRollup的插件生态非常丰富，我们需要选择合适的插件来完成特定的任务。

3、学会使用命令行。运行WithRollup的时候，我们可以选择使用命令行或者配置文件的方式，了解并掌握这些方法可以让我们更好地使用WithRollup。

六、总结

WithRollup是一个非常强大的代码打包工具，特别适合用于打包JavaScript。它具有许多强大的特性，例如代码分块、Tree-shake、自定义插件等等。这些特性使得WithRollup成为一个灵活定制、代码优化的利器。我们建议在实际应用中深入研究WithRollup，掌握其精华，从而提升我们的代码打包效率。