¿Cuál es el árbol de temblar?
Árbol temblar en el extremo delantero puede ser entendida como una herramienta "agitando" nuestro archivo js, que será menor que el código "Shake" a cabo, se trata de una categoría de optimización del rendimiento. En concreto, en el proyecto webpack,
hay un documento de entrada, el equivalente de un tronco de árbol, hay muchas dependencias de los archivos de entrada del módulo, el equivalente de ramas. En realidad, sin embargo depende de ella para un módulo, pero en realidad sólo utilizar algunas de estas características. Por
árbol temblar, el módulo no se sacudirá el uso, por lo que para lograr el propósito de borrar el código innecesario.
principios sacudidores de árboles
principio árbol temblar , en términos simples
- Naturaleza árbol sacudiendo es eliminar código Javascript inútil
- Debido a que el módulo aparece ES6, ES6 dependencias del módulo se determinan, y sin tener en cuenta el estado de tiempo de ejecución, el análisis estático se pueden realizar de forma fiable
Cómo utilizar sacudidor de árboles?
Crear un archivo de sacudir árboles en webpackDemo de demostración, el directorio / archivo siguiente
- index.js sigue
import {add} from "./math.js"
console.log(mathFn)
function component(){
var element = document.createElement("pre");
element.innerHTML = [
"hello webpack",
"5 cubed is equal to " + add(5,6)
].join("\n\n");
return element;
}
document.body.appendChild(component())
- math.js sigue
export function add(a,b){
console.log("add");
return a+b;
}
export function minus(a,b){
console.log("minus")
return a-b
}
export function multiply(a,b){
console.log("mutiply");
return a*b;
}
export function divide(a,b){
console.log("divide");
return a/b;
}
- árboles shaking.js sigue
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const webpack = require("webpack");
module.exports = {
mode:"development",
entry:path.resolve(__dirname,"src/index.js"),
module:{
rules:[
{
test:/\.m?js$/,
exclude:/(node_modules|bower_components)/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/preset-env"],
plugins:[
"@babel/plugin-transform-runtime"
]
}
}
}
]
},
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
// new webpack.NamedModulesPlugin(),
// new webpack.HotModuleReplacementPlugin()
],
devtool:"inline-source-map",
// devServer:{
// contentBase:"./dist",
// hot:true,
// inline:true
// }
}
- package.json sigue
{
"name": "webpackDevServer",
"sideEffects": false,
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config demo/webpack-dev-server/webpack-dev-server.js",
"server": "node demo/webpack-dev-middleware/server.js",
"hmr": "webpack-dev-server --config demo/HMR/webpack.hmr.js",
"treeShaking:dev": "webpack-dev-server --config demo/tree-shaking/tree-shaking.js",
"treeShaking:build": "webpack --config demo/tree-shaking/tree-shaking.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "7.6.4",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.3",
"babel-loader": "8.0.6",
"clean-webpack-plugin": "3.0.0",
"css-loader": "3.2.0",
"express": "4.17.1",
"html-webpack-plugin": "3.2.0",
"style-loader": "1.0.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.9",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.8.2"
}
}
- 执行 NPM treeShaking de ejecución: construcción
resultados de la ejecución son las siguientes
Después de la ejecución, podemos ver bundle.js archivos se pueden encontrar en todos los math.js código estaba lleno, pero sólo utilizar la función de archivo de complemento, no queremos inútil paquete de funciones de archivo, entonces se puede utilizar el sacudidor de árboles
- Activar webpack
utilizado actualmente en el proyecto es webpack4, el modo de conversación se establece en árbol de producción abierta sacudiendo
Acerca de los efectos laterales (efectos secundarios)
Se refiere al efecto secundario además de la función devuelve un valor distinto de cualquier estado de la aplicación observado fuera de los cambios llamada de función. Los efectos secundarios incluyen:
- Cambie cualquier variables externas o atributo de objeto (por ejemplo, una variable global, o una variable de función en la cadena de ámbito padre)
- registro de escritura
- En la salida de la pantalla
- Escribir archivo
- las solicitudes de red para el cabello
- Activar cualquier proceso externo
- Otra de las funciones de llamada con efectos secundarios
sacudiendo el árbol no puede identificar automáticamente el código que pertenece a los efectos secundarios, y por lo tanto especificar manualmente el código es muy importante, Si no se especifica que puede haber algunos problemas inesperados
En webpack, los efectos secundarios se consiguen mediante el packge.json propiedad
{
"name": "Árbol-agitación",
"efectos secundarios": false
}
Si todo el código está contenida efectos secundarios, podemos simplemente marcar un atributo como falsa, e informar webpack, puede eliminar de forma segura las exportaciones de exportación no utilizados
Si su código tiene algunos efectos secundarios, puede ser cambiado para proporcionar una matriz
{
"Name": "sacudidores de árboles"
"efectos secundarios": [
"./src/common/polyfill.js"
]
}
resumen
- sacudiendo el árbol no soporta la importación dinámica (por ejemplo sintaxis que los CommonJS requieren ()), sólo es compatible con la importación estática pura (ES6 la importación / exportación)
- webpack puede agregar una propiedad "efectos secundarios" en el package.json proyecto, los efectos secundarios de los scripts especifican manualmente
El modo cambia la configuración en package.json en sideeffects: falsos resultados son los siguientes
Podemos ver que el árbol de uso agitación, el volumen de código se hace pequeño, y citar math.js añaden función está activada, y otros códigos no sin referencias