0
我目前通過使用rollup.js超越簡單的「helloworld」的情況下磨腳。我創建了一個彙總項目,其中使用了babel,eslint和傳單的組合。我rollup.config.js是如下:使用傳單與彙總生成一個巨大的源代碼
import L from 'leaflet';
var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
而且我的index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
#map {
width:600px;
height:400px;
}
</style>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" />
<title>Learning Rollup</title>
</head>
<body>
<div id="map">
</div>
<!-- This is the bundle generated by rollup.js -->
<script src="js/main.min.js"></script>
</body>
</html>
當我執行rollup -c
// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default{
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourcemap: 'inline',
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
eslint({
exclude: [
'src/styles/**',
]
}),
babel({exclude:'node_modules/**', })
]
};
下一頁我main.js由下式給出,我最終得到了一個巨大的1.4MB + main.js.min
文件...如果我從我的rollup.config.js
中刪除sourcemap: 'inline'
,則文件大小將降至390 kb。源圖解析生成文件大小的原因是什麼?樹木砍伐是不是應該進一步減少生成的文件?