将 Leaflet 与 rollup 一起使用会生成一个巨大的 sourcemap

Question

除了简单的 "helloworld" 案例之外，我目前正在通过使用 rollup.js 磨练自己的脚力。我创建了一个汇总项目，我在其中结合使用了 babel、eslint 和传单。我的rollup.config.js如下：

// 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 由：

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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/leaflet@1.2.0/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 时，我最终得到一个 1.4MB+ main.js.min 的巨大文件...如果我从我的 rollup.config.js 中删除 sourcemap: 'inline'，大小该文件下降到 390 kb。出于什么原因，sourcemap 会爆炸生成文件的大小？ treeshacking 不是应该进一步减少生成的文件吗？

Answer 1

sourcemap 几乎总是比它映射的代码大。出于这个原因，sourcemap: 'inline' 不推荐 — 改为 sourcemap: true 它将被写入相邻的 .map 文件，该文件只会如果有人在启用 sourcemaps 的情况下打开他们的开发工具，则下载。

这与摇树无关。

将 Leaflet 与 rollup 一起使用会生成一个巨大的 sourcemap

Using Leaflet with rollup generates a huge sourcemap

leaflet

rollupjs