Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

feat: replace UglifyJs with Terser #858

Merged
merged 3 commits into from
Apr 17, 2019
Merged

feat: replace UglifyJs with Terser #858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
621090a
feat: replace UglifyJs with Terser
DimitarTachev Apr 10, 2019
0ae6030
fix: show proper stack traces from uglified code (split by new line i…
DimitarTachev Apr 15, 2019
167bc6e
fix: update the configs of the demo apps
DimitarTachev Apr 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 63 additions & 34 deletions demo/AngularApp/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader");
const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng");
const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { AngularCompilerPlugin } = require("@ngtools/webpack");
const TerserPlugin = require("terser-webpack-plugin");
const { getAngularCompilerPlugin } = require("nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin");
const hashSalt = Date.now().toString();

module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
Expand All @@ -26,6 +28,7 @@ module.exports = env => {
throw new Error("You need to provide a target platform!");
}

const AngularCompilerPlugin = getAngularCompilerPlugin(platform);
const projectRoot = __dirname;

// Default destination inside platforms/<platform>/...
Expand All @@ -45,29 +48,38 @@ module.exports = env => {
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
hmr, // --env.hmr,
unitTesting, // --env.unitTesting
} = env;
env.externals = env.externals || [];
const externals = (env.externals).map((e) => { // --env.externals
return new RegExp(e + ".*");
});

const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
const externals = nsWebpack.getConvertedExternals(env.externals);
const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
const tsConfigName = "tsconfig.tns.json";
const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
const entryPath = `.${sep}${entryModule}`;
const entries = { bundle: entryPath, application: "./application.android" };
if (platform === "ios") {
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js";
};

const ngCompilerTransformers = [];
const additionalLazyModuleResources = [];
if (aot) {
ngCompilerTransformers.push(nsReplaceBootstrap);
}

if (hmr) {
ngCompilerTransformers.push(nsSupportHmrNg);
}

// when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
// directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
// fixes https://github.com/NativeScript/nativescript-cli/issues/4024
if (env.externals.indexOf("@angular/core") > -1) {
const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule));
if (env.externals && env.externals.indexOf("@angular/core") > -1) {
const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule), tsConfigName);
if (appModuleRelativePath) {
const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath));
// include the lazy loader inside app module
Expand All @@ -79,14 +91,16 @@ module.exports = env => {

const ngCompilerPlugin = new AngularCompilerPlugin({
hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin)),
mainPath: resolve(appPath, entryModule),
tsConfigPath: join(__dirname, "tsconfig.tns.json"),
platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule))),
mainPath: join(appFullPath, entryModule),
tsConfigPath: join(__dirname, tsConfigName),
skipCodeGeneration: !aot,
sourceMap: !!sourceMap,
sourceMap: !!isAnySourceMapEnabled,
additionalLazyModuleResources: additionalLazyModuleResources
});

let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);

const config = {
mode: uglify ? "production" : "development",
context: appFullPath,
Expand All @@ -99,16 +113,15 @@ module.exports = env => {
]
},
target: nativescriptTarget,
entry: {
bundle: entryPath,
application: "./application.android",
},
entry: entries,
output: {
pathinfo: false,
path: dist,
sourceMapFilename,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
hashSalt
},
resolve: {
extensions: [".ts", ".js", ".scss", ".css"],
Expand All @@ -135,8 +148,9 @@ module.exports = env => {
"fs": "empty",
"__dirname": false,
},
devtool: sourceMap ? "inline-source-map" : "none",
devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
Expand All @@ -153,12 +167,14 @@ module.exports = env => {
},
minimize: !!uglify,
minimizer: [
new UglifyJsPlugin({
new TerserPlugin({
parallel: true,
cache: true,
uglifyOptions: {
sourceMap: isAnySourceMapEnabled,
terserOptions: {
output: {
comments: false,
semicolons: !isAnySourceMapEnabled
},
compress: {
// The Android SBG has problems parsing the output
Expand All @@ -173,7 +189,7 @@ module.exports = env => {
module: {
rules: [
{
test: new RegExp(entryPath),
test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
use: [
// Require all Android app components
platform === "android" && {
Expand All @@ -186,6 +202,9 @@ module.exports = env => {
options: {
angular: true,
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
}
},
].filter(loader => !!loader)
Expand Down Expand Up @@ -239,25 +258,23 @@ module.exports = env => {
}),
// Remove all files from the out dir.
new CleanWebpackPlugin([`${dist}/**/*`]),
// Copy native app resources to out dir.
new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
// Generate a bundle starter script and activate it in package.json
new nsWebpack.GenerateBundleStarterPlugin([
"./vendor",
"./bundle",
]),
new nsWebpack.GenerateBundleStarterPlugin(
// Don't include `runtime.js` when creating a snapshot. The plugin
// configures the WebPack runtime to be generated inside the snapshot
// module and no `runtime.js` module exist.
(snapshot ? [] : ["./runtime"])
.concat([
"./vendor",
"./bundle",
])
),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
Expand All @@ -267,6 +284,18 @@ module.exports = env => {
],
};

// Copy the native app resources to the out dir
// only if doing a full build (tns run/build) and not previewing (tns preview)
if (!externals || externals.length === 0) {
config.plugins.push(new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]));
}


if (report) {
// Generate report files for bundles content
Expand Down
75 changes: 49 additions & 26 deletions demo/JavaScriptApp/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const hashSalt = Date.now().toString();

module.exports = env => {
// Add your custom Activities, Services and other android app components here.
const appComponents = [
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
resolve(__dirname, "app/activity.android.js"),
resolve(__dirname, "app/activity.android.js")
];

const platform = env && (env.android && "android" || env.ios && "ios");
Expand All @@ -41,17 +42,24 @@ module.exports = env => {
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
hmr, // --env.hmr,
unitTesting, // --env.unitTesting
} = env;
const externals = (env.externals || []).map((e) => { // --env.externals
return new RegExp(e + ".*");
});

const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
const externals = nsWebpack.getConvertedExternals(env.externals);
const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

const entryModule = nsWebpack.getEntryModule(appFullPath);
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
const entryPath = `.${sep}${entryModule}.js`;
const entries = { bundle: entryPath, application: "./application.android" };
if (platform === "ios") {
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js";
};

let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);

const config = {
mode: uglify ? "production" : "development",
Expand All @@ -65,16 +73,15 @@ module.exports = env => {
]
},
target: nativescriptTarget,
entry: {
bundle: entryPath,
application: "./application.android",
},
entry: entries,
output: {
pathinfo: false,
path: dist,
sourceMapFilename,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
hashSalt
},
resolve: {
extensions: [".js", ".scss", ".css"],
Expand All @@ -101,8 +108,9 @@ module.exports = env => {
"fs": "empty",
"__dirname": false,
},
devtool: sourceMap ? "inline-source-map" : "none",
devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
Expand All @@ -120,12 +128,14 @@ module.exports = env => {
},
minimize: !!uglify,
minimizer: [
new UglifyJsPlugin({
new TerserPlugin({
parallel: true,
cache: true,
uglifyOptions: {
sourceMap: isAnySourceMapEnabled,
terserOptions: {
output: {
comments: false,
semicolons: !isAnySourceMapEnabled
},
compress: {
// The Android SBG has problems parsing the output
Expand All @@ -140,7 +150,7 @@ module.exports = env => {
module: {
rules: [
{
test: new RegExp(entryPath),
test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
use: [
// Require all Android app components
platform === "android" && {
Expand All @@ -152,6 +162,9 @@ module.exports = env => {
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
}
},
].filter(loader => !!loader)
Expand Down Expand Up @@ -196,25 +209,23 @@ module.exports = env => {
}),
// Remove all files from the out dir.
new CleanWebpackPlugin([`${dist}/**/*`]),
// Copy native app resources to out dir.
new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
// Generate a bundle starter script and activate it in package.json
new nsWebpack.GenerateBundleStarterPlugin([
"./vendor",
"./bundle",
]),
new nsWebpack.GenerateBundleStarterPlugin(
// Don't include `runtime.js` when creating a snapshot. The plugin
// configures the WebPack runtime to be generated inside the snapshot
// module and no `runtime.js` module exist.
(snapshot ? [] : ["./runtime"])
.concat([
"./vendor",
"./bundle",
])
),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
Expand All @@ -227,6 +238,18 @@ module.exports = env => {
],
};

// Copy the native app resources to the out dir
// only if doing a full build (tns run/build) and not previewing (tns preview)
if (!externals || externals.length === 0) {
config.plugins.push(new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]));
}

if (report) {
// Generate report files for bundles content
config.plugins.push(new BundleAnalyzerPlugin({
Expand Down
Loading