Long variable names

[jacwright]

This might be something with my webpack configuration rather than a problem with the loader, but I thought I would check.

I have an existing app I am wanting to migrate to using svelte but the components are bloating my JavaScript file. I am not using Uglify currently for certain reasons and would like to find out if this could be fixed easily.

A simple <h1>Hello {{name}}!</h1> component looks like this:

(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__ = __webpack_require__(283);
/* src/test.svelte generated by Svelte v1.40.2 */


function create_main_fragment(state, component) {
	var h1, text, text_1, text_2;

	return {
		c: function create() {
			h1 = Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["c" /* createElement */])("h1");
			text = Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["d" /* createText */])("Hello ");
			text_1 = Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["d" /* createText */])(state.name);
			text_2 = Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["d" /* createText */])("!");
		},

		m: function mount(target, anchor) {
			Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["g" /* insertNode */])(h1, target, anchor);
			Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["a" /* appendNode */])(text, h1);
			Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["a" /* appendNode */])(text_1, h1);
			Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["a" /* appendNode */])(text_2, h1);
		},

		p: function update(changed, state) {
			if (changed.name) {
				text_1.data = state.name;
			}
		},

		u: function unmount() {
			Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["e" /* detachNode */])(h1);
		},

		d: __WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["h" /* noop */]
	};
}

function Test(options) {
	Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["f" /* init */])(this, options);
	this._state = options.data || {};

	this._fragment = create_main_fragment(this._state, this);

	if (options.target) {
		this._fragment.c();
		this._fragment.m(options.target, options.anchor || null);
	}
}

Object(__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["b" /* assign */])(Test.prototype, __WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__["i" /* proto */]);
/* harmony default export */ __webpack_exports__["default"] = (Test);

/***/ })

You can see the export is named __WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__ and really bloats the JavaScript. Does anyone know how this might be reduced or if I have a setting causing this? I don't see it anywhere else in my file.

[nikku]

Does the identifier it get minified? From the snippet you posted it looks like it.

Names minified / mangled are between 1 and two chars.

[jacwright]

We recently launched and it has been much easier to find bugs with the code unminified. It isn't an ideal production environment, but it's been the best choice for now. As things become more stable I may use uglify again.

[Rich-Harris]

@jacwright I don't suppose you ever stumbled upon a solution to this? I assume it's just how webpack does things, but it does make things rather hard to follow.

[nikku]

It's about webpack and how it creates variables internally. Debugging should really take place with source maps enabled; shipping with minification in place to mangle the names.

I think this issue can be closed as won't fix for the loader.

[jacwright]

It it not how webpack creates variables internally. Webpack doesn't create variables in svelte code. Everywhere else in my compiled code the ES6 compiler short import names. This is because svelte uses the sharedPath to generate that variable name.

I looked into it more this morning and found the reason this occurs is because the ES6 code being generated for helpers is:

import { appendNode, assign, createElement, createText, detachNode, init, insertNode, noop, proto } from "/Users/jacob.wright/Personal/Projects/dabble/dabble/node_modules/svelte/shared.js";

And if I change the end of this line https://github.com/sveltejs/svelte-loader/blob/master/index.js#L29 to 'svelte/shared.js'; from require.resolve('svelte/shared.js'); then I get

import { appendNode, assign, createElement, createText, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";

and the long variables with pathnames from my machine go away.

This could be a security/privacy issue if compiled (non-compressed) code is stored in git, such as libraries of svelte components. Usually you don't uglify libraries, since the end product will do that in production.

I'm not sure why require.resolve was used in the loader and if changing it will break anything, but I will submit a PR on it and allow more discussion to occur there.

With the change made in my PR the resulting variable is now:

__WEBPACK_IMPORTED_MODULE_0_svelte_shared_js__

instead of

__WEBPACK_IMPORTED_MODULE_0__Users_jacob_wright_Personal_Projects_dabble_dabble_node_modules_svelte_shared_js__