Módulos ES6 que hacen temblar los árboles en webpack 2

Webpack 2 acaba de salir de la versión beta la semana pasada. Trae consigo una variedad de características anticipadas, incluido el soporte nativo para módulos ES6.

En lugar de utilizar la var module = require('module')sintaxis, webpack 2 admite ES6 importsy exports. Esto abre la puerta a optimizaciones de código como la agitación de árboles .

¿Qué es sacudir árboles?

Popularizado por el paquete de módulos Rollup.js de Rich Harris, la agitación de árboles es la capacidad de incluir solo código en el paquete que se está utilizando.

Cuando jugué por primera vez con Rollup, me sorprendió lo bien que funcionaba con los módulos ES6. La experiencia de desarrollo simplemente se sintió ... correcta. Podría crear módulos separados escritos en "JavaScript futuro" y luego incluirlos en cualquier lugar de mi código. Cualquier código que no se use no se incluye en mi paquete. ¡Genio!

¿Qué problema soluciona?

Si está escribiendo JavaScript en 2017 y comprende (consulte: fatiga de JavaScript) las diversas herramientas, su experiencia de desarrollo probablemente se sienta bastante fluida. Esto es importante, pero lo que también es importante es la experiencia del usuario . Muchas de estas herramientas modernas terminan saturando las aplicaciones web con archivos JavaScript masivos, lo que resulta en un rendimiento más lento.

Lo que me encanta de Rollup es que trata este problema y aporta una solución a la vanguardia de la comunidad de JavaScript. Ahora grandes nombres como webpack están intentando iterar sobre él.

Sacudir árboles puede no ser "la solución para acabar con todas las soluciones", pero es una pieza importante en el pastel más grande.

Un simple ejemplo

Antes de empezar, quiero ofrecerle un ejemplo trivial de sacudidas de árboles. Su aplicación se compone de 2 archivos index.jsy module.js.

Dentro de module.jsusted exporta 2 funciones de flecha con nombre:

// module.js export const sayHello = name => `Hello ${name}!`; export const sayBye = name => `Bye ${name}!`

Solo sayHellose importa al index.jsarchivo:

// index.js import { sayHello } from './module'; sayHello('World');

sayByese exporta pero nunca se importa. En cualquier sitio. Por lo tanto, debido al temblor de árboles, no se incluirá en su paquete:

// bundle.js const sayHello = name => `Hello ${name}!`; sayHello('World');

Dependiendo del paquete utilizado, el archivo de salida anterior puede verse diferente. Es solo una versión simplificada, pero entiendes la idea.

Recientemente leí un artículo escrito por Roman Liutikov y él hizo una gran analogía para visualizar el concepto de sacudir árboles:

“Si se pregunta por qué se llama agitación de árboles: piense en su aplicación como un gráfico de dependencia, esto es un árbol y cada exportación es una rama. Entonces, si sacudes el árbol, las ramas muertas caerán ". - Roman Liutikov

Sacudir árboles en webpack 2

Desafortunadamente para aquellos de nosotros que usamos webpack, la agitación de árboles está "detrás de un interruptor", por así decirlo. A diferencia de Rollup, es necesario realizar alguna configuración antes de que pueda obtener la funcionalidad que está buscando. La parte de "detrás de un interruptor" puede confundir a algunas personas. Lo explicaré.

Paso 1: configuración del proyecto

Asumiré que comprende los conceptos básicos del paquete web y puede orientarse en un archivo de configuración de paquete web básico.

Comencemos creando un nuevo directorio:

mkdir webpack-tree-shaking && cd webpack-tree-shaking

Una vez dentro, inicialicemos un nuevo npmproyecto:

npm init -y

La -yopción genera package.jsonrápidamente sin necesidad de responder a un montón de preguntas.

A continuación, instalemos algunas dependencias del proyecto:

npm i --save-dev [email protected] html-webpack-plugin

El comando anterior instalará la última versión beta de webpack 2 localmente en su proyecto, así como un complemento útil llamado html-webpack-plugin. Este último no es necesario para el objetivo de este tutorial, pero hará que las cosas sean un poco más rápidas.

Nota : El npm i --save-dev [email protected]equipo de paquete web todavía recomienda el comando en el momento de redactar este artículo. [email protected]eventualmente se eliminará gradualmente a favor del webpackúltimo comando. Consulte la sección ¿Cómo descargar?sección de la última publicación de lanzamiento de webpack para obtener más detalles.

Abra package.jsony asegúrese de que se hayan instalado como devDependencies.

Paso 2: crea archivos JS

Para ver el temblor de árboles en acción, necesita tener algo de JavaScript para jugar. En la raíz de su proyecto, cree una srccarpeta con 2 archivos dentro:

mkdir src && cd src touch index.js touch module.js

Nota: El touchcomando crea un nuevo archivo a través de la terminal.

Copie el siguiente código en los archivos correctos:

// module.js export const sayHello = name => `Hello ${name}!`; export const sayBye = name => `Bye ${name}!`;
// index.js import { sayHello } from './module'; const element = document.createElement('h1'); element.innerHTML = sayHello('World'); document.body.appendChild(element);

Si ha llegado hasta aquí, la estructura de su carpeta debería verse así:

/ | - node_modules/ | - src/ | | - index.js | | - module.js | - package.json

Paso 3: Webpack desde la CLI

Since you have no configuration file created for your project, the only way to get webpack to do any work at the moment is through the webpack CLI. Let’s perform a quick test.

In your terminal, run the following command in your project’s root:

node_modules/.bin/webpack

After running this command, you should see output like this:

No configuration file found and no output filename configured via CLI option. A configuration file could be named 'webpack.config.js' in the current directory. Use --help to display the CLI options.

The command doesn’t do anything, and the webpack CLI confirms this. You haven’t given webpack any information about what files you want to bundle up. You could provide this information via the command line or a configuration file. Let’s choose the former just to test that everything is working:

node_modules/.bin/webpack src/index.js dist/bundle.js

What you’ve done now is pass webpack an entry file and an output file via the CLI. This information tells webpack, "go to src/index.js and bundle up all the necessary code into dist/bundle.js". And it does just that. You'll notice that you now have a dist directory containing bundle.js.

Open it up and check it out. There’s some extra javascript in the bundle necessary for webpack to do its thing, but at the bottom of the file you should see your own code as well.

Step 4: Create a webpack configuration file

Webpack can handle a lot of things. I’ve spent a good chunk of my free time diving into this bundler and I still have barely scratched the surface. Once you’ve move passed trivial examples its best to leave the CLI behind and create a configuration file to handle the heavy lifting.

In your project’s root, create a webpack.config.js file:

touch webpack.config.js

This file can be as complicated as you make it. We’ll keep it light for the sake of this post:

// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: 'dist' }, plugins: [ new HtmlWebpackPlugin({ title: 'Tree-shaking' }) ] }

This file provides webpack with the same information you gave to the CLI earlier. You’ve defined index.js as your entry file and bundle.js as your output file. You've also added your html-webpack-plugin which will generate an html file in your dist directory. Convenient.

Go ahead and test this to make sure it’s still working. Remove your dist directory, and in the command line type:

webpack

If everything went smoothly, you can open up dist/index.html and see "Hello World!".

Note: The use of a configuration file gives us the convenience of typing webpack instead of node_modules/.bin/webpack. Small wins.

Step 5: Babel

I mentioned earlier that webpack 2 brings native support for ES6 modules. This is all true, but it doesn’t change the fact that ES6 is not fully supported across all browsers. Because of this, you’re required to transform your ES6 code into readily acceptable JavaScript using a tool like Babel. In conjunction with webpack, Babel gives us the ability to write your “future JavaScript” without worrying about the implications of unsupported browsers.

Let’s go ahead and install Babel in your project:

npm i --save-dev babel-core babel-loader babel-preset-es2015

Take note of the babel-preset-es2015 package. This little guy is the reason I sat down to write all of this up.

Step 6: babel-loader

Webpack can be configured to transform specific files into modules via loaders. Once they are transformed, they are added to a dependency graph. Webpack uses the graph to resolve dependencies and includes only what is needed into the final bundle. This is the basis for how webpack works.

You can now configure webpack to use babel-loader to transform all of your .js files:

// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: 'dist' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ 'es2015' ] } } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Tree-shaking' }) ] };

The module property provides a set of instructions for webpack. It says, "take any files ending in .js and transform them using babel-loader, but don't transform any files inside of node_modules!"

We’re also passing the babel-preset-es2015 package as an option to babel-loader. This just tells babel-loaderhow to transform the JavaScript.

Run webpack again to make sure everything is good. Yes? Great! What we've done is bundled up your JavaScript files while compiling them down to JavaScript thats readily supported across browsers.

The underlying problem

The package babel-preset-es2015 contains another package named babel-plugin-transform-es2015-modules-commonjs that turns all of your ES6 modules into CommonJS modules. This isn't ideal, and here's why.

Javascript bundlers such as webpack and Rollup can only perform tree-shaking on modules that have a static structure. If a module is static, then the bundler can determine its structure at build time, safely removing code that isn’t being imported anywhere.

CommonJS modules do not have a static structure. Because of this, webpack won’t be able to tree-shake unused code from the final bundle. Luckily, Babel has alleviated this issue by providing developers with an option that you can pass to your presets array along with babel-preset-es2015:

options: { presets: [ [ 'es2015', { modules: false } ] ] }

According to Babel’s documentation:

“modules - Enable transformation of ES6 module syntax to another module type (Enabled by default to "commonjs"). Can be false to not transform modules, or one of ["amd", "umd", "systemjs", "commonjs"]".

Slide that extra bit of code into your configuration and you’ll be cooking with peanut oil.

The final state of webpack.config.js looks like this:

// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: 'dist' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ [ 'es2015', { modules: false } ] ] } } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Tree-shaking' }) ] };

The Grand Finale

Run webpack again and pop open your bundle.js file. You won't notice any difference. Before you go crazy, know this! It's ok. We've been running webpack in development mode this whole time. Webpack knows that you have unused exports in your code. Even though it's included in the final bundle, sayBye will never make it to production.

If you still don’t believe me, run webpack -p in your terminal. The -p option stands for production. Webpack will perform a few extra performance optimizations, including minification, removing any unused code along the way.

Open up bundle.js. Since it's minified, go ahead and search for Hello. It should be there. Search for Bye. It shouldn't.

Voila! You now have a working implementation of tree-shaking in webpack 2!

For the curious, I’ve been slowly iterating over my own lightweight webpack configuration in a GitHub Repo:

jake-wies/webpack-hotplate

webpack-hotplate - A webpack boilerplate for personal projects

github.com

It’s not meant to be overly verbose and bloated. It’s focused on being an approachable boilerplate with walkthroughs at every turn. If you’re interested, check it out!

If you have any questions, feel free to reach out on Twitter!