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，掌握其精華，從而提升我們的代碼打包效率。